骨干中的嵌套视图和事件

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'

需要注意的是，指定一个事件events没有选择将其绑定到视图的el ：

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

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

我认为您想从ModelView中删除el并让Backbone这样构建<li> ：

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

然后，用于ModelView的el将是<li class="result"> ，并且点击处理程序将附加到<li> 。 您还必须调整渲染，以将el放入调用方的<ul id="resultsTableList">中。

Answer 2

我答应会在一个答案中解释我的评论，虽然亩太短了才是正确的答案，但希望它对您也很有价值

我的意思是，在绑定时，我宁愿使用listenTo而不是on （以避免僵尸侦听器），但是如果您确实使用on确保在需要时传递上下文，例如

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

VS

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

第一个将this对象绑定到model ，第二个在您调用它时将其绑定到this （视图）

因此，这全都取决于您希望this对象在select函数主体中位于什么位置

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