Question

我刚开始使用backbone.js，目前正在制作一个页面，其中包含一个包含文本输入元素的div #listing_filter和一个显示从RESTful后端（PHP / Codeigniter）获取的一些列表的表格。文本输入中的值将充当过滤器，以缩小服务器检索的结果范围。

问题：每当任何文本框中的值发生变化时，我都希望浏览器根据过滤器值获取另一组结果。下面是我的尝试，即使文本输入值已更改，updateFilter函数也不会触发。出了什么问题？

另一个问题是我是否应该将#listing_filter的内容放入模板中，或者只是将其硬编码到主体HTML中？谢谢！

JS代码

window.ListingFilterView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'updateFilter');
    },

    events: {
        'change input' : 'updateFilter'
    },

    updateFilter: function() {
        console.log('hey');
    }

});

// Router

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'listings',
    },

    listings: function() {
       //... some other code here
        this.listingFilterView = new ListingFilterView();
    }
});

HTML代码

<div id="listing_filter">
    Price: <input type="text" id="listing_filter_price" />
    Beds: <input type="text" id="listing_filter_bedroom" />
    Baths: <input type="text" id="listing_filter_bathroom" />
</div>

Answer 1

Backbone视图仅响应视图el上的事件或其el内的元素。默认情况下，视图的el只是an empty <div>而您并没有告诉视图使用其他任何内容。

您可以告诉视图哪个el使用http://jsfiddle.net/ambiguous/5yXcU/1/）：

new ListingFilterView({ el: $('#listing_filter') })
// Or like this:
new ListingFilterView({ el: '#listing_filter' })

或者您可以使用setElement（http://jsfiddle.net/ambiguous/APEfa/1/）让视图附加到该元素：

initialize: function() {
    this.setElement($('#listing_filter'));
    // or setElement('#listing_filter')
}

或在定义视图（http://jsfiddle.net/ambiguous/nyTZU/）时设置el：

window.ListingFilterView = Backbone.View.extend({
    el: '#listing_filter',
    //...
});

一旦完成，您需要了解<input>不会触发更改事件until it loses focus，因此您必须等待用户退出输入或切换到监听keypress事件并使用计时器检测他们何时停止输入。

用户更改输入值时的触发功能（backbone.js）

1 个答案: