8

背景：我正在构建一个应用程序，该应用程序需要几个大型参考数据集合才能运行。我仅限于 HTML 和 Javascript（包括 JSON）。

问题：我如何在 Backbone.js 中引导一个集合，其中集合对象在服务器上是 JSON 格式并且我只使用 Javascript？

这是我已经知道的：

  • Backbone.js 引导最佳实践需要 Rails 或其他一些服务器端语言 ( http://backbonejs.org/#FAQ-bootstrap )。
  • 大多数 Javascript I/0 操作都是异步的，例如从服务器加载 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' 是我的应用程序对象。我可以显示一个微调器，并在填充集合时通过向应用程序对象发送警报来更新加载状态。

4

3 回答 3

5
于 2012-06-14T16:10:15.827 回答
1

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

var itemList = new ItemList;
itemList.fetch({success: function () {
    dqApp.trigger('itemList:reset');
}});
于 2012-10-19T20:43:16.437 回答
0

一种可能的解决方案是使您的视图依赖于 的状态fetch，因此在您的模型/集合完成加载之前它不会被实例化。

请记住，这是一个 Backbone 反模式。使视图依赖于您的集合/模型可能会导致 UI 延迟。这就是为什么推荐的方法是通过直接在页面中内联 json 来引导数据。

但这并不能解决您的情况，您需要在无服务器情况下引导数据。使用几行 Ruby/PHP/etc 将 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");
    });
于 2015-06-08T08:28:49.867 回答