Backbone 即使在刷新集合时视图也不会刷新

Question

我有一个 backbone 集合，它动态地使用 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

根据文档。更改模型属性时会触发 "change" 事件。我建议在提取中添加 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);

Backbone 即使在刷新集合时视图也不会刷新

Backbone View not refreshing even when Collection gets Refreshed

backbone.js

backbone-events

backbone.js-collections