事件未在backbone.js 视图中触发

Question

这是我对“tr”单行的看法。我想单击名称单元格并弹出该单元格的视图。我无法触发事件..

我错过了什么吗？谢谢！

所以这个问题由 gumballhead 解决，我遇到的问题是需要有一个与 ItemRowView 关联的 tagName。然后在渲染函数中，我需要做 self.$el.html(this.template(model));

觉得分享给大家会有所帮助..

    ItemRowView = Backbone.View.extend({

    initialize : function() {
    },
    template : _.template($('#item-row-template').html()),
    render : function() {       
        var self=this;        
        var model = this.model.toJSON();
        self.$el = this.template(model);
        return self.$el;
    },

    events : {
        "click td .item-name" : "viewOneItem"
             //Even if I change it to "click td":"viewOneItem", still not firing
    },
    viewOneItem : function() {
        console.log("click");
    }
});

收藏视图：

ItemsView = Backbone.View.extend({

    initialize : function() {
    },
    tagName : "tbody",

    render : function() {
        var self = this;
        this.collection.each(function(i) {
            var itemRowView = new ItemRowView({
                model : i
            });
            self.$el.append(itemRowView.render()); 
        });
        return self.$el;
    }

});

应用视图： AppView = Backbone.View.extend({ this.items = new Items();

  this.items.fetch();
  this.itemsView = new ItemsView({collection:this.items});    

  $('#items-tbody').html(itemsView.render());

});

对于模板：

<script type="text/template" id="item-row-template">
<tr>
    <td class="item-name">{{name}}</td>
    <td>{{description}}</td>
</tr>
</script>

 <table>
    <thead>
        <tr>
        <th>name</th>
        </tr>
    </thead>
    <tbody id="items-tbody">

    </tbody>
 </table>

Answer 1

使用"click td.item-name" 作为您的选择器。您当前正在侦听具有“item-name”类的 td 后代的点击。

仅供参考，您的模板中还有一个锚元素的结束标签，而模板中没有开始标签。

编辑：我想你想要self.$el.html(this.template(model)); 而不是self.$el = this.template(model);

但是没有必要使用您发布的代码将this 别名为self。

编辑 2：很高兴你把它整理好了。让我给你一个解释。

所有主干视图都需要一个根元素。这是事件哈希中的事件在实例化时委托给的元素。当在没有现有元素的情况下实例化主干视图时，它将根据配置设置创建一个，例如tagName，其默认值为"div"。在您显式注入之前，该元素不会出现在 DOM 中。

因此，当您在 render 方法中设置 self.$el 时，您将覆盖根元素（以及事件，尽管它们永远不会触发，因为它会侦听对 td 的后代的点击DOM 中不存在的 div）。

作为旁注，在您的情况下这不是正确的方法，您可以使用this.setElement($(this.template(model)); 将事件从实例化时创建的 div 重新委托给原始模板创建的 tr。