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;
        }
    });

別のビューで DOM に挿入された ObjectsTableView。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をclassNameattributes指定する場合：

this.el指定されている場合、ビューの、、およびプロパティから作成さtagNameれます。そうでない場合は、空です。classNameidattributeseldiv

したがって、Backboneが作成するの<tr id="table-item"></tr>はthis.elビュー内ですが、それをDOMのどこにも挿入していません。次のようなことをする必要があります：

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

どこかでDOMを表示するために、セレクターのないイベントelだけを使用できます。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 に答える