主干视图在辅助提取时未更新

Backbone View not updating on secondary fetch

本文关键字：提取 更新 视图      更新时间：2023-09-26

我正在使用Backbone来显示项目列表，由服务器上的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对话框来"添加注释"，该对话框只是简单地将POST发布到RESTful API，在ajax帖子成功后，我调用 

    Notes.fetch();

并且模型已更新，但视图不会更改。

您的 AppView 没有呈现方法，因此第一次提取会导致绘制，因为处理程序绑定到"重置"事件，但第二次提取没有。这是一个蛮力：

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);
相关文章：