Backbone.js 重构主干视图代码以消除重复

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

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等等），并根据这些数字生成事件。或者我需要把这些事件完全排除在视野之外

---

有什么建议吗？

我会在

中添加一个

类，比如
class=“year”
，使它们更容易找到，然后绑定到
input.year
上单击事件，并从事件的
当前目标.name
中抓取年份。大概是这样的：

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

谢谢你的建议。它起作用了。几点澄清：1。为什么你说有一个
class=“year”
会更容易找到？引用name属性似乎工作正常。
class=“year”
允许您通过单击input.year

来绑定到感兴趣的

，而

name

属性在

之间变化，因此您必须在

事件中设置多个条目。