2

バックボーンを使用してアイテムのリストを表示し、サーバー上の JSON によって入力されます。 

    //Models
    var Note = Backbone.Model.extend();

    var NoteList = Backbone.Collection.extend({
    model: Note,
            url:  "http://www.myserver.com/notes/notes.json"
    });

    var Notes = new NoteList;

    //Views
    var NoteView = Backbone.View.extend({
            tagName: "li",
            template: _.template($('#noteTemplate').html()),
            initialize: function() {
                    this.listenTo(this.model, 'change', this.render);
            },
            render: function() {
                    this.$el.html(this.template(this.model.toJSON()));
                    return this;
            }
            });

    var AppView = Backbone.View.extend({
            el: $("#specificationNotes"),
            noteTemplate: _.template($('#noteTemplate').html()),
            initialize: function() {
                    this.listenTo(Notes, 'reset', this.addAll);
                    this.listenTo(Notes, 'all', this.render);
                    Notes.fetch({reset:true});
            },
            addOne: function(note) {
                    var view = new NoteView({model: note});
                    this.$("#notesList").append(view.render().el);
            },
            addAll: function() {
                    Notes.each(this.addOne, this);
            }
    });
    var App = new AppView;

最初のフェッチでコンテンツが正しく取得され、リストが表示されます。jQueryダイアログを使用して、単にRESTful APIに投稿する「メモを追加」します.ajax投稿が成功した後、私は呼び出します 

    Notes.fetch();

モデルは更新されますが、ビューは変更されません。

4

1 に答える 1

1

AppView には render メソッドがないため、最初のフェッチでは「リセット」イベントにバインドされたハンドラーが原因でペイントが発生しますが、2 回目では発生しません。ここにブルートフォースがあります：

render: function() {
   this.$el.html(""); // so we don't readd the same items on re-render
   this.addAll();
}

毎回すべてのメモを最初から再描画するため、非効率的ですが、少なくとも画面上でライブの変更を確認できるはずです. そして多分交換

this.listenTo(Notes, 'reset', this.addAll);
this.listenTo(Notes, 'all', this.render);

と

this.listenTo(Notes, 'reset', this.render);
this.listenTo(Notes, 'sync', this.render);
于 2013-10-13T14:57:07.887 に答える