Question

我有某种巫师。我尝试从json自动生成表。我想在用户点击表格行后转到下一步。但我不能订阅点击事件。没有事件发生。我可以订阅行点击吗？

    //table element view class
    var ObjectsTableView = Backbone.View.extend({
        tagName: 'tr',
        id: 'table-item',
        events:{
//no one works
            'click tr' : 'onClick',
            'click th' : 'onClick',
            'click #some' : 'onClick'
        },
        //configure underscore template
        template: _.template('<th id="some"><%= f1 %></th><th><%= f2 %></th><th><%= f3 %></th>'),    
        onClick: function(){
            alert("click");
        },
        render: function(){
            //use template and assign to html
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });

ObjectsTableView在另一个View中插入DOM。这在DOM中出现如下：

<table class="table table-striped">
    <thead>
      <tr>
       <th>F1</th>
       <th>F2</th>
       <th>F3</th>
      </tr>
    </thead>
    <tbody>
       <tr id="table-item">
       <th id="some">f1</th>
       <th>f2</th>
       <th>f3</th>
      </tr>
     </tbody>
   </table>

但点击表格行不会抛出事件

Answer 1

我认为您的问题在于您使用id和tagName的方式。指定id, tagName, className, or attributes properties时：

this.el是根据视图的tagName，className，id和attributes属性创建的（如果已指定）。如果没有，则el为空div。

因此Backbone将在视图中创建<tr id="table-item"></tr>是您的this.el，但您不会在任何地方将其插入DOM。你需要做类似的事情：

$('table').append(v.render().el);

某个地方让你看到el进入DOM，然后你只能使用没有选择器的click事件：

events: {
    'click': 'onClick'
}

演示（请打开你的控制台）：http://jsfiddle.net/ambiguous/nLTGv/

如果DOM中已有<tr id="table-item">，那么您希望在视图定义中使用el，再次使用简单的无选择器click事件：

var ObjectsTableView = Backbone.View.extend({
    el: '#table-item',
    events: {
        'click': 'onClick'
    },
    //...

然后，您的this.el将成为DOM中已有的#table-item。

演示：http://jsfiddle.net/ambiguous/7RYBJ/

无法订阅onClick事件

1 个答案: