2

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

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>
4

2 回答 2

3

你所有的 ModelView 都绑定到同一个 DOM 元素：

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

然后每个实例将绑定到点击#resultsTableList：

events:
   'click' : 'select'

请注意，在没有选择器的情况下指定事件events会将其绑定到视图的el：

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

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

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

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

然后，elforModelView将是 an<li class="result">并且点击处理程序将附加到<li>. 您必须调整渲染以将els 也放入<ul id="resultsTableList">调用者中。

于 2013-04-17T22:44:05.643 回答
1

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

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

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

对比

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

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

所以这一切都取决于你希望你的this对象在select函数体中是什么

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

于 2013-04-17T22:45:47.553 回答