如何在Backbone.js中使用JavaScript仅引导集合

Question

背景：我正在开发一个应用程序，需要使用多个大型的引用数据集。 我仅限于使用HTML和JavaScript（包括JSON）。

问题：如何在Backbone.js中引导集合，在此集合对象以JSON格式存在于服务器上且我仅使用JavaScript？

以下是我已知的信息：

• Backbone.js引导最佳实践需要Rails或其他服务器端语言 (http://backbonejs.org/#FAQ-bootstrap)。
• 大多数JavaScript I/O操作都是异步的，例如从服务器加载JSON。
• 在Backbone.js中，使用fetch()来引导数据被认为是反模式。同时，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'是我的应用程序对象。通过向应用程序对象发送警报，我可以显示旋转器并在集合被填充时更新加载状态。

- Mr The Falcon

Answer 1

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

- Justin wong

---

这并没有回答问题。The Falcon 先生想要从服务器加载集合的内容，而不是从脚本/HTML 文件中嵌入的数据。 - Snowball

这就是引导程序（bootstrapping）的含义，从嵌入数据中加载集合，而不使用 fetch()。 - Michael Zajac

我还是有点困惑。你首先从哪里获取数据以便将其嵌入到脚本/HTML中？难道不需要向数据库服务器发出RESTful调用吗？ - jay

Answer 2

fetch函数接受一个选项参数，其中可以有一个success回调函数：

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

- Snowball

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对象（如果您不使用jQuery，则为XMLHTTPRequest）保存到模型的属性中。这样，您就可以拥有更细粒度的控制，并且可以使用deferred object响应在创建视图之前检查调用的状态。

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

- Gui Ambros