3

これは、「tr」としての単一行に対する私の見解です。名前のセルをクリックして、そのセルのビューをポップアップ表示したい。イベントの発火を取得できませんでした..

私は何かを逃していますか？ありがとう！

したがって、この問題はガムボールヘッドによって解決されます。私が抱えていた問題は、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"セレクターに使用します。現在、クラス "item-name" を持つ td の子孫に対するクリックをリッスンしています。

参考までに、テンプレートに開始タグのないアンカー要素の終了タグもあります。

self.$el.html(this.template(model));編集：あなたはむしろ欲しいと思います self.$el = this.template(model);

ただし、投稿したコードでエイリアスthisする必要はありません。self

編集 2: 整理できてよかったです。説明させてください。

すべてのバックボーン ビューにはルート要素が必要です。これは、インスタンス化時にイベント ハッシュ内のイベントが委任される要素です。tagNameバックボーン ビューが既存の要素なしでインスタンス化されると、デフォルトが である のような構成設定に基づいてバックボーン ビューが作成されます"div"。要素は、明示的に挿入するまで DOM に表示されません。

したがって、render メソッドで self.$el を設定すると、ルート要素が上書きされます (イベントと共に、ただし、div の子孫である td のクリックをリッスンするため、イベントは発生しませんでした)。 DOM には存在しませんでした)。

補足として、あなたの場合は正しい方法ではありませんが、インスタンス化this.setElement($(this.template(model));で作成された div から元のテンプレートで作成された tr にイベントを再委任することができました。

于 2013-02-28T19:13:00.050 に答える