javascript - 主干中的嵌套 View 和事件

Question

所以我有两种看法。一个“父” View 绑定(bind)到一个集合，多个 subview 绑定(bind)到集合中的各个模型。

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'

因此，当我单击列表元素之一时，所有 ModelView 的选择函数都会被触发。我认为我构建此模型的方式只会显示已单击的特定模型。这是怎么回事？

模板 HTML-

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

这适用于每个型号-

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


  </li>

Answer 1

所有 ModelView 都绑定(bind)到同一个 DOM 元素:

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

然后每个实例将绑定(bind)到 #resultsTableList 上的点击:

events:
   'click' : 'select'

请注意specifying an event in events without a selector将其绑定(bind)到 View 的 el :

Omitting the selector causes the event to be bound to the view's root element (this.el).

结果是您有多个 View 绑定(bind)到完全相同的 DOM 元素上的点击。

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

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

然后，el对于ModelView将是 <li class="result">单击处理程序将附加到 <li> 。您必须调整渲染以放置 el进入<ul id="resultsTableList">也在调用者中。