Question

我有一个搜索栏视图：

App.Views.SearchField = Backbone.View.extend({
    events: {
        'keyup' : 'setFilter'
    },

    setFilter: function() {
        if (typeof this.filterCallback === 'function') {
            var filter = this.$el.val();
            this.filterCallback(filter);
        }
    },

    setFilterCallback: function(filterCallback) {
        this.filterCallback = filterCallback; //debounce here
    }
});

是实例化的：

App.searchBar = new App.Views.SearchField({
    el: $('[data-role="top-search"]')
});

我从另一个视图的初始化连接到它：

App.Views.PartnerCompanies = App.Views.baseView.extend({

initialize: function( options )
{
    this.filter = '';
    App.searchBar.setFilterCallback(this.updateFilter);
    _.bindAll(this, "updateFilter");
}

render: function() {
console.log('rendering partnercompanies list');
// get data and show it.
}

updateFilter: function(filter) {
    console.log('filter updated');
    this.filter = filter;
    this.render();
},

但它不起作用。

输出是：

rendering partnercompanies list 
filter updated [multiple times]

过滤器更新后，我的render()方法永远不会被调用。

检入调试器显示正在调用render()（祖父类）的Backbone.View方法。我很困惑，因为我在另一个视图中使用了相同的技术并且它工作正常。

编辑：

这在updateFilter中引用App.searchBar，而不是App.Views.PartnerCompanies实例。

Answer 1

正如您在编辑中所说，this中的updateFilter()是App.searchBar的实例，而不是App.Views.PartnerCompanies。因此，当您在this.render()中致电updateFilters时，会在App.searchBar个实例上调用它。 App.searchBar没有render()，父亲App.Views.SearchField也没有。但App.Views.SearchField继承自Backbone.View。那是为什么您的方法调用Backbone render()方法。

从根本上说，问题是this并不是指App.Views.PartnerCompanies。这应该是一个简单的解决方案。如果您在_.bindAll中更换setFilterCallback和App.Views.PartnerCompanies行，那么您应该很高兴。这样，您就可以在将其作为回调分配之前绑定this变量，因此在updateFilter中调用后，上下文不会发生变化。

在骨干中调用基类的渲染方法

1 个答案: