主干中的嵌套视图和事件答案

【问题标题】：Nested views and events in backbone主干中的嵌套视图和事件
【发布时间】：2013-04-17 22:23:43
【问题描述】：

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

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'

因此，当我单击其中一个列表元素时，所有模型视图的选择功能都会被触发。我以为我构建这个的方式只有被点击的特定模型才会出现。这是怎么回事？

模板 HTML-

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

这适用于每个型号-

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


  </li>

【问题讨论】：

有意思，可以分享一下你的模板HTML吗？会不会是 e.stopPropagation vs e.preventDefault 的事情？这是所有的代码吗？像你一样，我错过了原因。 p.s.这是原始缩进吗？看起来您的选择功能属于集合视图而不是子视图（我认为咖啡脚本对它很敏感，但我不是咖啡脚本用户）
所以我认为你可以假设缩进是好的。我不认为这是问题所在。还有一部分（我不认为）是问题，但我会发布它。还发布模板html
hm.. 你在哪里关闭？不确定它是否相关，但它可能是......当你做“on”时，你似乎没有将“this”作为上下文传递，所以上下文将是你的模型，而不是你对“@model.on”的看法选中",@select`
所以当我点击页面上的其他地方时，选择功能被触发，这意味着由于某种原因视图彼此重叠并分布在页面上？我不知道页面上的视图是否可以在几何上受到限制。
Eran-对不起，我很愚蠢-您能改写您的评论吗？

标签： javascript backbone.js coffeescript

【解决方案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 元素上的点击。

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

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

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

【讨论】：

调整渲染部分是什么意思？
您需要执行类似$('#resultsTableList').append(model_view.render().el) 的操作才能将<li>s 放入DOM。并调整模板使其中没有<li>，每个ModelView 模板将只是{{ ipAddress }}。
哦，所以这应该在父视图中？
那么我的渲染方法应该是什么样子？它应该只是附加一个带有 {{ ipAddress }} 的模板吗？
现在...没有触发点击事件，所以我不确定又发生了什么。

【解决方案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 中，我只是不太了解）

【讨论】：