即使集合被刷新，主干视图也不刷新

Question

我有一个骨干集合，它动态地使用 URL 来获取结果。然后，我创建一个视图，该视图具有按键事件来捕获按键输入并从后端刷新集合。我已在我的视图中添加了一个侦听器以更改集合，但即使集合正在刷新，我的按键事件也不会触发该侦听器。

employees.EmployeesCollection = Backbone.Collection.extend({
        url: function() {
        if(this.searchName)
            return serviceUrls.employees_searchByName_url + "/" + this.searchName;
        else
            return serviceUrls.employees_list_url; 
    },
    searchName: null,
    search: function(searchName) {
        this.searchName = searchName;
        this.fetch({
            success: function() {
                console.log("Fetched new collection");
            },
            error: function(collection, response){
                console.log("Something went wrong");
            }
        });
    },    
    parse: function(response, options) {
        return response;
    }
});

employees.EmployeeListView = Backbone.View.extend({
    el: "#employee",
    template : _.template($('#employees_tpl').html()),
    events : {
        "keyup #searchValue": "searchByName"
    },
    initialize: function(options) {
        this.options = options;
        this.listenTo(this.collection, 'change', this.render);
    },
    render: function() {
        var that = this;
        // Only render the page when we have data
        this.collection.fetch().done(function() {
            that.$el.html(that.template({
                collection: that.collection.toJSON()
            }));
        });
        return this; 
    },
    showResults: function(results){
        this.collection = results;
        this.render();
    },
    // Search Employees By Name
    searchByName: _.throttle(function(e) {
        var searchValue = $("#searchValue").val();
        this.collection.search(searchValue);
    }, 500)
});

// Create Employees View, passing it a new Collection of Employees
var employeesView = new employees.EmployeeListView({
    collection: new employees.EmployeesCollection()
});

Answer 1

根据文档。更改模型属性时会触发“更改”事件。我建议在 fetch 中添加 reset:true。并将监听事件更改为重置。

this.collection.fetch({reset:true, 
    success:function(){...},
    error:function(){...}
})

具体来说，在您的搜索方法中：

search: function(searchName) {
    this.searchName = searchName;
    this.fetch({
        success: function() {
            console.log("Fetched new collection");
        },
        error: function(collection, response){
            console.log("Something went wrong");
        },
        reset:true
    });
},   

那么在您看来，不要听更改事件，而是听重置

this.listenTo(this.collection, 'reset', this.render);