用户更改输入值(主干.js）时的触发功能

Trigger function when user changes input value (backbone.js)

本文关键字：功能 js 主干 输入 用户      更新时间：2023-09-26

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

网页代码

<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>

主干视图将仅响应视图el或其el内的元素上的事件。默认情况下，视图的el只是一个空<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')
}

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

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

一旦解决了这个问题，你需要明白，<input>在失去焦点之前不会触发更改事件，所以你必须等待用户跳出输入或切换到侦听keypress事件并使用计时器来检测他们何时停止键入。

相关文章：