javascript - 用户更改输入值时触发函数(backbone.js)

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

主干 View 只会响应 View 的 el 上的事件或在其 el 内的元素上.默认情况下， View 的 el只是an empty <div> 而且您没有告诉 View 使用其他任何东西。

你可以告诉 View 哪个el使用(http://jsfiddle.net/ambiguous/5yXcU/1/):

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

或者您可以使用 setElement 让 View 将自身附加到该元素( http://jsfiddle.net/ambiguous/APEfa/1/ ):

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

或设置 el当您定义 View 时(http://jsfiddle.net/ambiguous/nyTZU/):

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

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