Javascript 保存模型后无法重新渲染主干视图

我保存了模型，从服务器端得到了一个ok响应，数据库被更新了。我试图做的是重新绘制集合，并使用保存的模型信息更新视图。我遗漏了一些小事，但我就是想不出来

   $(document).ready(function () {
window.App = {
    Models: {},
    Collections: {},
    Views: {}
};

window.template = function(id){
    return _.template( $('#' + id).html() );
};


// Person Model
App.Models.Person = Backbone.Model.extend({
    defaults: {
        id: null,
        question: null,
        quizid: null,
        answerid: null
    },
     url: function() {
            return 'myurl/';
        }
});


App.Collections.People = Backbone.Collection.extend({
    model: App.Models.Person,
    url: 'myurl/'

});



App.Views.People = Backbone.View.extend({
    tagName: 'ul',

    render: function(){
        this.collection.each(function(person){
            var personView = new App.Views.Person({ model: person });
            this.$el.append(personView.render().el);
        }, this);

        return this;
    }
});


App.Views.Person = Backbone.View.extend({
    tagName: 'li',
    template: template('personTemplate'),
    events: {
     "click #saveButton" : "savedata",
    },


    savedata: function(event){
        //alert(this.model.get("id") + " " + $('#title').val());
                var newModel = new App.Models.Person();
                newModel.save({id: this.model.get("id"), question: $('#title').val()}, {
                    wait : true,
                    success: function (response) {
                        alert(response.responseText);
                        },
                        error: function (model, response) {
                            alert(response.responseText);
                        }
                    }
                );
    },

    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});



var peopleCollection = new App.Collections.People;
peopleCollection.fetch({
    success: function(){
    var peopleView = new App.Views.People({collection: peopleCollection});
  $('body').append(peopleView.render().el);
}});


var pw = new peopleView({collection: personCollection});
pw.render();

---

如果要在编辑模型数据后刷新视图，则必须侦听

sync

或

change

事件，然后重新渲染视图

App.Views.Person = Backbone.View.extend({
    initialize: function(params) {
        this.listenTo(this.model, 'sync', this.render);
    }
});

如果您要添加一个全新的模型，则需要在创建后将其添加到集合中

newModel.save({id: this.model.get("id"), question: $('#title').val()} //...
this.collection.add(newModel)

并在“人员”视图中侦听

添加
事件

this.lisenTo(this.collection, 'add', this.render

App.Views.People = Backbone.View.extend({
   initialize: function(params) {
       this.listenTo(this.collection, 'add remove sync', this.render);
   },

   render: function(){
       this.$el.empty();

       this.collection.each(function(person){
            var personView = new App.Views.Person({ model: person });
            this.$el.append(personView.render().el);
        }, this);

       return this;
    }
});

在这种情况下，重新蚀刻整个集合是多余的
 不幸的是，这不起作用。我仍然需要手动刷新以查看更改。抱歉，我以为您正在编辑模型。请再次查看更新的答案不幸的是，它没有更新视图，加上添加的代码，它在页面加载时加载数据两次。我认为由于某些原因，this.controller.add（newModel）位没有得到处理。当我将该行放在newModel.save的正下方时，我得到语法错误，我将它放在success中，然后它就不会被处理。请在jsbin等上附加演示。有
$el.empty（）
以避免数据重复我得到以下代码的错误，这是.controller.add（myModel）行
savedata:function（event）{myModel.save（{id:myModel.get（“id”），疑问：$（'#title'）.val（），quizid:null，answerid:null}，{this.collection.add（myModel）；wait:true，success:function（response）{alert（response.responseText）；}，错误：function（model，response）{alert（responseText）；}，