Backbone.js刷新视图而无需重新加载页面

Question

我正在使用骨干.js，在一个视图中，我有以下视图：

window.PersonListView = Backbone.View.extend({

initialize: function () {
    this.render();
},

render: function () {

    var people = this.model.models;

    $(this.el).html(this.template());                

    for (var i = 0; i < people.length; i++) {
        this.$('#peopleTable tbody').append(new PersonListItemView({model: people[i], no: i+1}).render().el);
    }

    this.$('#peopleTable').dataTable({"bAutoWidth": false,"iDisplayLength": 50});        

    return this;
}
});

window.PersonListItemView = Backbone.View.extend({

tagName: "tr",

initialize: function (options) {
    this.model.bind("change", this.render, this);
    this.model.bind("destroy", this.close, this);
    this.no = options.no;
    this.render();
},

render: function () {

    $(this.el).html(this.template({
            //people stuff
    }));

    return this;
},

events: {
    "click .delete"     : "deletePerson",
},

deletePerson: function(event){
    event.preventDefault();

    if (confirm("Are you sure to delete the person?")) {            
        this.model.destroy({
            success: function () {
                location.reload();
            }
        });
    }

    return false;
}

}）;

该人员在人员列表中，当他们单击“删除”时，我想在不重新加载整个网站的情况下更新列表。 我必须如何修改视图才能做到这一点？ 谢谢！

Answer 1

您只需从列表中删除一项，

deletePerson: function(event) {
    event.preventDefault();

    if (confirm("Are you sure to delete the person?")) {
        this.model.destroy({
            success: function() {
                $(event.currentTarget).closest('tr').remove();
            }
        });
    }

    return false;
}