Tôi làm cách nào để khởi động một bộ sưu tập trong Backbone.js bằng cách sử dụng Javascript chỉ

Question

Bối cảnh: Tôi đang xây dựng một ứng dụng cần nhiều bộ dữ liệu tham chiếu lớn để hoạt động. Tôi chỉ giới hạn ở HTML và Javascript (bao gồm JSON).

Câu hỏi: Làm cách nào để khởi động bộ sưu tập trong Backbone.js trong đó đối tượng thu thập ở định dạng JSON trên máy chủ và tôi chỉ sử dụng Javascript?

Đây là những gì tôi biết đã:

• Backbone.js bootstrapping thực hành tốt nhất đòi hỏi Rails hoặc một số ngôn ngữ server-side khác (http://backbonejs.org/#FAQ-bootstrap).
• Hầu hết các hoạt động I/0 Javascript là không đồng bộ, chẳng hạn như tải JSON từ máy chủ.
• Sử dụng hàm fetch() cho dữ liệu khởi động được coi là mẫu chống trong Backbone.js. fetch() cũng là một hoạt động không đồng bộ.

Đây là những gì tôi đã đưa ra cho đến nay:

ItemList = Backbone.Collection.extend({ 
    model: Item, 
    url: 'http://localhost:8080/json/items.json' 
}); 
var itemList = new ItemList; 
itemList.fetch(); 
itemList.on('reset', function() { dqApp.trigger('itemList:reset'); }); 

'dqApp' là đối tượng ứng dụng của tôi. Tôi có thể hiển thị một spinner và cập nhật trạng thái tải trong khi các bộ sưu tập đang được phổ biến bằng cách gửi cảnh báo đến đối tượng ứng dụng.

Answer 1

này có thể giúp bạn: http://ricostacruz.com/backbone-patterns/#bootstrapping_data

Answer 2

Các fetch function chấp nhận một tham số tùy chọn, có thể có một callback success:

var itemList = new ItemList; 
itemList.fetch({success: function() { 
    dqApp.trigger('itemList:reset'); 
}}); 

Answer 3

Một giải pháp khả thi là làm cho cái nhìn của bạn phụ thuộc vào tình trạng của fetch, vì vậy nó không được khởi tạo cho đến khi mô hình/bộ sưu tập của bạn tải xong.

Chỉ cần nhớ rằng đây là mẫu chống Backbone. Việc làm cho chế độ xem phụ thuộc vào bộ sưu tập/mô hình của bạn có thể gây ra sự chậm trễ giao diện người dùng. Đó là lý do tại sao phương pháp được khuyến nghị là khởi động dữ liệu của bạn bằng cách chèn trực tiếp json vào trang của bạn.

Nhưng điều này không giải quyết được tình huống của bạn, nơi bạn cần khởi động dữ liệu trên một tình huống máy chủ ít hơn. Thật dễ dàng để nhúng dữ liệu json vào trang của bạn một cách động với một vài dòng Ruby/PHP/etc, nhưng nếu bạn đang làm việc phía máy khách chỉ, làm cho khung nhìn phụ thuộc vào mô hình là con đường để đi.

Nếu bạn đang tải bộ sưu tập sử dụng fetch(), bạn có thể sử dụng một cái gì đó như:

var Model = Backbone.Model.extend({}); 

var Collection = Backbone.Collection.extend({ 
    model: MyModel, 
    url: 'http://localhost:8080/json/items.json' 
}); 

var View = Backbone.View.extend({ 
    //code 
}); 

var myCollection = new Collection(); 

myCollection.fetch({ 
    success: function() { 
     console.log('Model finished loading'); } 
     myView = new View(); 
    }); 

cách ưa thích của tôi đang sử dụng ajax (ví dụ, .getJSON, .ajax) và tiết kiệm đối tượng jqXHR trả lại (hoặc XMLHttpRequest, nếu bạn không sử dụng jQuery) vào một thuộc tính trong mô hình của bạn. Bằng cách này, bạn có quyền kiểm soát chi tiết hơn và có thể sử dụng phản hồi deferred object để kiểm tra trạng thái cuộc gọi trước khi tạo chế độ xem của bạn.

var Model = Backbone.Model.extend({}); 

var Collection = Backbone.Collection.extend({ 
    model: Model, 
    status: {}, 
    initialize: function() { 
     var _thisCollection = this; 
     this.status = $.getJSON("mydata.json", function (data) { 
      $.each(data, function(key) { 
       var m = new Model ({ 
         "name": data[key].name, 
         "value": data[key].value, 
        }); 
       _thisCollection.add(m); 
      }); 
     }); 
    } 
}); 

var View = Backbone.View.extend({ 
    console.log("Creating view..."); 
    //code 
}); 

var myCollection = new Collection(); 
var myView = {}; 
myCollection.status 
    .done(function(){ 
     console.log("Collection successfully loaded. Creating the view"); 
     myView = new View(); 
    }) 
    .fail(function(){ 
     console.log("Error bootstrapping model"); 
    });