当收集被刷新骨干查看甚至没有刷新 [英] Backbone View not refreshing even when Collection gets Refreshed

问题描述

我有一个骨干的集合，需要动态的URL来获取结果。然后我创建具有捕获的键输入，并从后端刷新集合的键事件的图。我添加了一个监听到我的收藏改变看法，但一个没有被上即使集合越来越刷新我的钥匙了事件触发。

  employees.EmployeesCollection = Backbone.Collection.extend（{
        网址：函数（）{
        如果（this.searchName）
            返回serviceUrls.employees_searchByName_url +/+ this.searchName;
        其他
            返回serviceUrls.employees_list_url;
    }，
    sea​​rchName：空，
    搜索：功能（searchName）{
        this.searchName = searchName;
        this.fetch（{
            成功：函数（）{
                的console.log（撷取的新的集合）;
            }，
            错误：功能（收集，响应）{
                的console.log（出事了）;
            }
        }）;
    }，
    解析：功能（响应，期权）{
        返回响应;
    }
}）;employees.EmployeeListView = Backbone.View.extend（{
    EL：#employee
    模板：_.template（$（'＃employees_tpl'）HTML（）。）
    事件：{
        KEYUP #searchValue：searchByName
    }，
    初始化：功能（选件）{
        this.options =选择;
        this.listenTo（this.collection，改变，this.render）;
    }，
    渲染：功能（）{
        VAR认为这=;
        //只渲染页面的时候，我们有数据
        this.collection.fetch（）。完成（功能（）{
            这一点。$ el.html（that.template（{
                集合：that.collection.toJSON（）
            }））;
        }）;
        返回此;
    }，
    showResults：功能（结果）{
        this.collection =结果;
        this.render（）;
    }，
    //搜索员工用名字
    sea​​rchByName：_.throttle（函数（五）{
        。VAR searchValue = $（＃searchValue）VAL（）;
        this.collection.search（searchValue）;
    }，500）
}）;//创建员工查看，传递给它的员工的一个新的集合
VAR employeesView =新employees.EmployeeListView（{
    集合：新employees.EmployeesCollection（）
}）;
 

解决方案

根据文档。当模型属性发生变化时触发一个change事件。我建议增加复位：在获取真实的。并改变收听事件复位。

  this.collection.fetch（{重置：真实，
    成功：函数（）{...}，
    错误：功能（）{...}
}）
 

具体而言，在您的搜索方式：

 搜索：功能（searchName）{
    this.searchName = searchName;
    this.fetch（{
        成功：函数（）{
            的console.log（撷取的新的集合）;
        }，
        错误：功能（收集，响应）{
            的console.log（出事了）;
        }，
        复位：真
    }）;
}，
 

那么在你看来，与其听一个变化事件，听重置

  this.listenTo（this.collection，复位，this.render）;
 

I have a backbone collection that dynamically takes the URL to fetch results. I then create a view that has the key-up event to capture key input and refresh the collection from the back-end. I have added a listener to my view for collection change but that is not being triggered on my key-up event even though the collection is getting refreshed.

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()
});

解决方案

according to documentation. a "change" event is triggered when model attribute is changed. i suggest adding reset:true in the fetch. and change the listening event to reset.

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

specifically, in your search method:

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
    });
},   

then in your view, instead of listen to a change event, listen to a reset

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

这篇关于当收集被刷新骨干查看甚至没有刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！