backbone.js - 重构 Backbone View 代码以消除重复

Question

我为过滤器创建了一个简单的主干视图，该过滤器根据单击的“输入”标签隐藏表格元素：

var Filter = Backbone.View.extend({
tagName: "form",
events: {
    "click input[name='2013']" : "filter2013",
    "click input[name='2012']" : "filter2012"
},
filter2013: function() {
    $("tr:contains('2013-')").toggle();
},
filter2012: function() {
    $("tr:contains('2012-')").toggle();
},
render: function() {
    this.$el.html(JST['acquisitions/filter']);
    $("#filter-container").append(this.$el);
    return this;
}
});

一点也不优雅，特别是如果我想添加更多“输入”元素，这将导致视图中出现更多重复代码的自定义函数。可能是一个 for 循环与 jquery 相结合来在网页中查找数字（比如 2013、2012、2011 等）并基于此生成事件。或者也许我需要将事件完全从视图中移除。

有什么建议么？

Answer 1

我会class在<input>s 中添加一个，例如class="year"，使它们更容易找到，然后绑定到单击事件input.year并从事件的currentTarget.name. 像这样的东西：

var Filter = Backbone.View.extend({
    // ...
    events: {
        "click input.year" : "filter_year"
    },
    filter_year: function(ev) {
        $("tr:contains('" + ev.currentTarget.name + "-')").toggle();
    },
    //...
});