Question

所以我有两个观点。一个绑定到集合的“父”视图和绑定到集合中各个模型的多个子视图。

class ResultTable extends Backbone.View
    el:"body"
    initialize:()->
       @collection.bind "add", @add

    add:(model)->
       new ModelView({model:model})

class ModelView extends Backbone.View
    el: "#resultsTableList"
    initialize:()=>
       @model.on "selected",@select
       @render()

    render:()=>
       #append template 

    select:(e)=>
       e.preventDefault()
       console.log(@model)

    events:
       'click' : 'select'

因此，当我单击其中一个列表元素时，会触发所有ModelViews的select函数。我想我的构建方式只显示了点击的特定模型。这是怎么回事？

模板HTML -

<div id="resultsTableContainer" class="resultsContainer">
    <ul id="resultsTableList">
    </ul>

这是每种型号 -

<li class="result">
{{ ipAddress }}


  </li>

Answer 1

所有ModelView都绑定到相同的DOM元素：

class ModelView extends Backbone.View
    el: "#resultsTableList"

然后每个实例都会绑定#resultsTableList上的点击次数：

events:
   'click' : 'select'

请注意specifying an event in events without a selector将其绑定到视图el：

省略selector会导致事件绑定到视图的根元素（this.el）。

结果是您有多个视图绑定到完全相同的DOM元素上的点击。

我想你想放弃el并从你的ModelView中删除，让Backbone像这样构建<li>：

class ModelView extends Backbone.View
    tagName: 'li'
    className: 'result'
    #...

然后，el的{{1}}将为ModelView，点击处理程序将附加到<li class="result">。您必须调整渲染，以便将<li>放入调用者的el。

Answer 2

我答应我会在答案中解释我的评论，虽然 mu太短得到了正确的答案，但希望它对你也有价值

我的意思是，在绑定时，我更倾向于使用listenTo而不是on（以避免僵尸侦听器），但如果您使用on，请确保通过上下文，如果你需要，例如

this.model.on("selected", this.select);

v.s。

this.model.on("selected", this.select, this);

第一个将this对象绑定到model 第二个是它在你调用时this绑定的（视图）

所以这一切都取决于您希望this对象在select函数体中的内容

（抱歉，这不是在CoffeeScript中，我只是不太了解它）

骨干中的嵌套视图和事件

2 个答案: