0

我对 Backbone 很陌生，只是想弄清楚事情的工作方式。如何遍历“获取”的结果？

(function($) {
    console.log('Formcontainer init.'); 

    var Field = Backbone.Model.extend({
        defaults: {
            id: "0",
            memberlist_id: "3",
            field_name: "sample-field-name",
        },
        initialize: function() {
            console.log('Field model init.');
        }
    });

    var FieldCollection = Backbone.Collection.extend({
        defaults: {
            model: Field
        },
        model: Field,
        url: 'http://localhost:8888/getstuff/3.json',
        initialize: function() {
            console.log('FieldCollection init.');
        }
    });

    var ListView = Backbone.View.extend({
        el: '#app-container',

        initialize: function() {
            _.bindAll(this,"render");
            console.log('ListView init.')
            this.counter = 0;

            this.collection = new FieldCollection();
            this.collection.fetch();
            //this.collection.bind('reset', function() { console.log('xxx')});
            //this.collection.fetch();

            this.render();
        },

        events: {
            'click #add': 'addItem'
        },

        render: function() {
            var self = this;
            console.log('Render called.');
        },

        addItem: function() {
            this.counter++;
            this.$("ul").append("<li>hello world" + this.counter + "</li>");
        }
    });

    var listView = new ListView();

})(jQuery);

我在我的 Firebug 控制台中得到了这个：

Formcontainer init.
ListView init.
FieldCollection init.
GET http://localhost:8888/getstuff/3.json 200 OK
Render called.
Field model init.
Field model init.
Field model init.
Field model init.
Field model init.

似乎调用了 fetch() - 因为“字段模型初始化”。在控制台中 5 次。但是我该如何输出呢？我想将项目附加到无序列表中。

谢谢！

4

1 回答 1

1

将重置事件绑定到您的渲染函数...

this.collection.bind('reset', this.render, this);

这会在获取完成后触发，因此您可以创建列表...

render: function() {
    var self = this;
    console.log('Render called.');
    this.collection.each(function(i,item) {
        this.$el.append("<ul>" + item.get("field_name") + "</ul>");
    });
},
于 2012-07-03T05:53:51.210 回答