1

我刚开始使用backbone.js，目前正在制作一个页面，其中包含一个#listing_filter包含文本输入元素的div和一个显示从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>
4

1 回答 1

3

Backbone 视图只会响应视图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

于 2012-06-16T22:31:04.503 回答