我如何在仅使用Javascript的Backbone.js中引导集合

上下文：我正在构建一个需要几个大型参考数据集合进行操作的应用程序。 我仅限于HTML和Javascript（包括JSON）。

问题 ：如何在Backbone.js中引导集合中服务器上的集合对象为JSON格式的集合，并且仅使用Javascript？

这是我所知道的：

Backbone.js引导最佳实践需要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'是我的应用程序对象。 我可以显示一个微调，并通过向应用程序对象发送警报来填充集合时更新加载状态。

---

这可能会帮助你：http://ricostacruz.com/backbone-patterns/#bootstrapping_data

---

fetch函数接受一个可以success回调的选项参数：

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

---

一种可能的解决方案是让你的视图依赖于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");
    });

链接地址: http://www.djcxy.com/p/55301.html

上一篇: How do I bootstrap a collection in Backbone.js using Javascript only

下一篇: Force code to execute after another method finishes executing