如何僅使用Javascript在Backbone.js中引導集合

Question

上下文：我正在構建一個需要幾個大型參考數據集合才能運行的應用程序。 我僅限於HTML和Javascript（包括JSON）。

問題 ：如何在Backbone.js中引導集合，其中集合對象在服務器上是JSON格式，而我只使用Javascript？

這就是我所知道的：

• Backbone.js bootstrapping最佳實踐需要Rails或其他一些服務器端語言（ http://backbonejs.org/#FAQ-bootstrap ）。
• 大多數Javascript I / 0操作都是異步的，例如從服務器加載JSON。
• 使用fetch（）來引導數據被認為是Backbone.js中的反模式。 fetch（）也是一個異步操作。

這是我到目前為止所提出的：

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'是我的應用程序對象。 我可以顯示一個微調器，並在通過向應用程序對象發送警報來填充集合時更新加載狀態。

Answer 1

這可能會對你有所幫助： http ： //ricostacruz.com/backbone-patterns/#bootstrapping_data

Answer 2

fetch函數接受options參數，該參數可以有success回調：

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

Answer 3

一種可能的解決方案是使視圖依賴於fetch的狀態，因此在模型/集合完成加載之前，它不會被實例化。

請記住，這是一個Backbone反模式。 使視圖依賴於您的集合/模型可能會導致UI延遲。 這就是推薦的方法是通過直接在頁面中內嵌json來引導數據的原因。

但這並不能解決您需要在無服務器情況下引導數據的情況。 使用幾行Ruby / PHP /等動態地將json數據動態地嵌入到頁面中很容易，但是如果你只是在客戶端工作，那么使視圖依賴於模型就可以了。

如果您使用fetch()加載集合，則可以使用以下內容：

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();
  });

我首選的方法是使用ajax（例如.getJSON ， .ajax ）並將返回的jqXHR對象（或XMLHTTPRequest，如果你不使用jQuery）保存到模型中的屬性。 這樣，您可以進行更精細的控制，並且可以在創建視圖之前使用延遲對象響應來檢查調用的狀態。

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");
    });