Làm cách nào để đồng bộ hóa nhiều lần tải Backbone.js?

Question

Tôi hơi mới với Backbone.js, nhưng tôi đã rất ấn tượng với mọi thứ có thể làm cho tôi và tôi đang cố gắng tìm hiểu các mẫu và thực tiễn tốt nhất hiện nay.

Tôi có hai bộ sưu tập:

var CollA = Backbone.Collection.extend({ 
    model: ModelA, 
    url: '/urlA' 
}); 

var CollB = Backbone.Collection.extend({ 
    model: ModelB, 
    url: '/urlB' 
}); 

var collA = new CollA; 
var collB = new CollB; 

Khi tải ứng dụng của tôi, tôi cần phải lấy cả hai bộ sưu tập từ máy chủ, và chạy một số mã bootstrap khi nó đảm bảo rằng cả hai fetches đã hoàn thành.

Đây là cách tôi đã làm nó cho bây giờ:

collA.fetch({success: function() { 
    collB.fetch({success: function() { 
     // run the needed code here. 
    }}); 
}}); 

này hoạt động, mã cần được đảm bảo để chạy chỉ sau khi cả hai lấy về hoàn tất mỹ mãn. Tuy nhiên, rõ ràng là không hiệu quả, bởi vì các lần tải chạy theo kiểu serially, cái khác.

Mô hình nào tốt hơn để thực hiện việc này, chạy các lần tìm nạp song song và sau đó chạy một số mã khi cả hai lần tìm nạp đã hoàn tất thành công?

Answer 1

Nếu bạn đang sử dụng jQuery, sử dụng when:

$.when(collA.fetch(),collB.fetch()).done(function(){ 
    //success code here. 
}); 

Bối cảnh:

• http://api.jquery.com/jQuery.when/
• http://documentcloud.github.com/backbone/#Collection-fetch

Bạn vượt qua trong một hoặc nhiều deferreds để $.when. Điều đó xảy ra là "jqXHR" mà các bộ sưu tập trả về thực hiện giao diện lời hứa/Trì hoãn có thể được kết hợp thành lời hứa mới sử dụng $.when. Các yêu cầu về cơ bản sẽ được đồng thời (tốt, nhiều như javascript cho phép) và chức năng được chuyển đến .done sẽ chỉ thực thi khi cả hai lần nạp thành công.

Answer 2

Tôi thích câu trả lời của @ JayC nếu bạn phải tìm nạp từng bộ sưu tập riêng lẻ. Bạn có thể lập luận rằng một lần tìm nạp duy nhất đến máy chủ sẽ tốt hơn so với nhiều lần tìm nạp. Nếu bạn đang tìm nạp dữ liệu này khi tải ứng dụng, tôi sẽ thực hiện một cuộc gọi đến máy chủ và sau đó chuyển dữ liệu đến các bộ sưu tập có liên quan của bạn. Nó thực sự phụ thuộc vào số lượng bộ sưu tập bạn phải nạp vào tải ứng dụng, nhưng tôi thành thật thích thực hiện một cuộc gọi đến máy chủ sau đó chuyển dữ liệu đến các bộ sưu tập có liên quan của tôi.

$.ajax({ 
    url: "path/to/app-load-data" 
}).done(function(data) { 
    collA = new CollA(data.collA); 
    collB = new CollB(data.collB); 
}); 

Điều này rõ ràng sẽ phụ thuộc nếu bạn có thể thao tác api của bạn và ở trên không tuân theo REST. Nhưng sau đó một lần nữa bạn đang thực hiện một cuộc gọi đến máy chủ như trái ngược với nhiều cuộc gọi.

Answer 3

Khi @JayC cho biết bạn có thể sử dụng $.when từ jQuery, tùy chọn khác mà tôi thích là chức năng after (từ Gạch dưới), thực thi một lần ngay sau khi cuộc gọi dự kiến ​​hoàn tất.

http://underscorejs.org/#after

function runMyApp(){ 
    // run the needed code here. 
    console.log('This will run one time but until both fetch are being completed.'); 
} 

//2 because you have two collections 
var renderApp = _.after(2, runMyApp); 
collA.fetch({success: renderApp}); 
collB.fetch({success: renderApp});