将参数传递到主干视图的主干事件对象答案

【问题标题】：Passing parameters into the Backbone events object of a backbone view将参数传递到主干视图的主干事件对象
【发布时间】：2011-10-19 15:13:58
【问题描述】：

我有以下用于主干视图的事件。它是一个产品视图 - 具有三个选项卡（“全部”、“前 3”、“前 5”）

我能否以某种方式将参数传递到方法声明中，使其等效于以下内容（这不起作用）？

events : {
    "click #top-all":          "topProducts(1)"
    "click #top-three":      "topProducts(2)"
    "click #top-ten":         "topProducts(3)"
},
topProducts(obj){
    // Do stuff based on obj value
}

【问题讨论】：

标签： javascript backbone.js

【解决方案1】：

您可以将额外的参数放在可点击项目的数据属性中；像这样：

<a id="top-all" data-pancakes="1">

然后topProducts 可以自己解决：

topProducts: function(ev) {
    var pancakes = $(ev.currentTarget).data('pancakes');
    // And continue on as though we were called as topProducts(pancakes)
    // ...
}

【讨论】：

"this" 指向此处的主干视图，因此直接 $(this) 不会给出与单击的元素相对应的 DOM 元素。
@papdel：对，抱歉。但是您可以改用ev.target（其中ev 是事件）。请看一下我的固定版本。
@papdel：是的，ev.target（当你不能依赖 this 时）结合数据属性是跟踪事物的好方法。
@whistler: { 'click #top-all': 'topProducts', 'click #top-three': 'topProducts', ... }.
我只能说，这对于应该非常简单的事情来说是愚蠢的复杂。来自主干.js 的制造商的减 5 分。

【解决方案2】：

我通常更喜欢这样做：

events : {
   "click #top-all":    function(){this.topProducts(1);}
   "click #top-three":  function(){this.topProducts(2);}
   "click #top-ten":    function(){this.topProducts(3);}
},
topProducts(obj){
   // Do stuff based on obj value
}

【讨论】：

好东西！！
最简单的往往是最好的。我喜欢！

【解决方案3】：

您可以做的，只是检查作为 currentTarget 在参数中接收的元素的 id。

topProduct: function (e) {
    var id = e.currentTarget.id;
    if (id == "top-all") // Do something
    else if (id == "top-5") // Do something
    else if (id == "top-3") // Do something
}

【讨论】：

这实际上比选择的答案更好，因为它不需要对 DOM 进行任何修改。
这个答案比添加不必要的数据属性要好得多。
如果你想获得课程使用e.currentTarget.className 而不是e.currentTarget.id。此外，e 对象内部还有很多有趣的属性！
@DavidCorral 如果您查看 OP 提供的示例，则在附加了点击处理程序的所有元素上都提到了一个 Id。我同意你对事件对象有趣属性的看法。

【解决方案4】：

您可以使用闭包来做到这一点：

EventObject.on(event, (function(){
    var arg = data; // Closure preserves this data
    return function(){
        doThis(arg);
    }   
})());

【讨论】：