-1

我已经定义了 aModel和 a Collection，并且由于我的数据库中已经有记录，我希望在页面加载时在应用程序中显示所有这些记录。

我尝试使用Backbone.sync，但在 Chrome 调试模式下仍然看到一个空集合。

我的 Backbone.js 代码：

http://jsfiddle.net/GhaPF/15/ （由于模板依赖性，我不得不在那里删除一些代码）。

$(document).ready(function() {

    var Item = Backbone.Model.extend({
        defaults: { "date": "",
                    "text": "default text"
                },
        initialize: function() {      // STEP 3
            var dateString = giveMeDate();
            this.set("date", dateString);
        },
        urlRoot : './items'
    });

    var ItemList = Backbone.Collection.extend({
        model: Item,
        url: './items/',
        initialize: function() {
            this.fetch();
        }
    });


   //************ VIEW ********************************
    var ItemListView1 = Backbone.View.extend({
        el: 'body',
        initialize: function(myitemList) {
            this.itemlist = myitemList;
            this.itemlist.bind('add', this.addOneItem, this);
            this.render();
        },
        addOneItem: function() {
            this.render();
        },
        render: function() {                // STEP 5       this is called because add() is bound to this.render (in initialization of this View)
            text = this.itemlist.toJSON();
            string = JSON.stringify(text);
            $("#view1").html('');
            $.tmpl("itemTemplate", text).appendTo("#view1");
            return this;
        },
        events: {
            "keypress #new-item":  "createOnEnter"    // STEP 1
        },
        createOnEnter: function(e) {
          if (e.keyCode != 13) return;
          if (!$("#new-item").val()) return;
          this.itemlist.create({"text": $("#new-item").val()});   // STEP 2
          $("#new-item").val('');
        }
    });


    $("#new-item").focus();
    var itemlist = new ItemList();
    Backbone.sync("read", itemlist);
    var myitemListView = new ItemListView1(itemlist);

这是我在 Backbone.sync 之后在集合中看到的内容：

d
_byCid: Object
_byId: Object
length: 0
models: Array[0]
__proto__: x
4

1 回答 1

3

  1. 您可能不应该直接调用同步，因为该方法可能会被其他同步方法覆盖（用于支持 localStorage、IndexedDB、couchdb 或其他）。Sync 更像是一个“存储驱动程序”。

  2. 您应该调用 fetch 来填充您的集合。所以在你的代码中，它应该是这样的：

    itemlist.fetch({success: function (models) {
   console.log("got", models);
});
var myitemListView = new ItemListView1({collection: itemList});

  3. 在页面加载后立即使用异步获取填充您的集合被认为是“糟糕的风格”。您通常应该使用与页面一起发送的代码填充它，并且仅使用 fetch 对集合进行后续更新。

在上面的代码示例中，如果您坚持执行异步获取，您可能希望延迟创建视图，直到您实际填充了集合，以避免当列表从空变为填充时不必要的闪烁（视图绑定到集合并在提取完成时重置）。

于 2012-09-07T13:07:30.307 回答