3

这是我对单行作为“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>
4

1 回答 1

4

用于"click td.item-name"您的选择器。您当前正在侦听对 td 的后代的点击，该类为“item-name”。

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

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

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

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

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

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

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

于 2013-02-28T19:13:00.050 回答