1

我有某种巫师。我尝试从 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 在另一个视图中插入 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>

但是单击表格行不会引发事件

4

1 回答 1

2

我认为您的问题在于您如何使用id和tagName. 当您指定id、tagName、className或attributesproperties时：

this.el如果指定，则从视图的tagName、和属性创建。如果不是，则为空。classNameidattributeseldiv

因此，Backbone 将在视图中创建<tr id="table-item"></tr>您this.el的内容，但您不会将其插入到 DOM 的任何地方。您需要执行以下操作：

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

某个地方可以让您查看elDOM，然后您可以只使用一个click没有选择器的事件：

events: {
    'click': 'onClick'
}

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

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

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

那么你this.el将#table-item是已经在 DOM 中的那个。

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

于 2012-05-17T19:25:33.380 回答