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 に答える