setElementの後にバックボーンイベントが新しい要素に委任されない

Question

アンダースコアテンプレートを使用してバックボーンビューを実装しています。ビューelは、setElement-functionを使用してテンプレートhtmlに置き換えられます。関数の宣言では、 "...ビューの委譲されたイベントを古い要素から新しい要素に移す"と述べていますが、何らかの理由でこれが機能しません。バックボーン宣言に記載されているように、これがなぜ機能しないのでしょうか？ここで

状況（ビューの関連部分）の例です：

 initialize: function(args) { 
     _.extend(this, args); 
     this.listenTo(this.model, 'change', this.render); 
    }, 

    events: { 
     'click .active-area': '_test' 
    }, 

    _test: function() { 
     // After "setElement" this doesn't fire anymore. 
     this.model.set('color', 'green'); 
    }, 

    render: function() { 
     // After this the "click" listener no longer exists. 
     this.setElement(this.template(this.model.toJSON()); 

     return this; 
    } 

Answer 1

this.template(...)は、DOMの要素ではありません。

コードでは、setElementは、古い要素からイベントリスナーを削除してから、という新しい要素に委譲します。は、ページ上ではなく、メモリにのみ存在します。

代わりに、現在の要素の内容を変更するだけです。

this.$el.html(this.template(this.model.toJSON())); 

---

私は、テンプレートのHTMLで全体の要素のhtmlを交換する必要があると私はsetElement機能を使用する必要がある理由です。

<div id="currentView"><!-- view's root (el) --> 
    <button type="button" class="active-area">Click me</button> 
    <span class="color"><%= color %></span> 
</div> 

はラッピングdiv要素を追加して、テンプレートに#currentViewのdivを移動：

では、次のHTMLを持っていると言います。

<div class="wrapper"><!-- view's root (el) --> 
    <div id="currentView"> 
     <button type="button" class="active-area">Click me</button> 
     <span class="color"><%= color %></span> 
    </div> 
</div> 

ここでthis.$el.htmlは要素全体をスワップします。

---

はあなたが本当にビューは、独自のルート要素を交換したいような状況では、あなたがして、新しい要素を作成し、古いの代わりに新しい要素を入れてjQueryの replaceWithを使用することができます。

render: function() { 
    // create a new element from the template 
    var $newEl = $(this.template(this.model.toJSON())); 

    // completely replace the current element in the DOM 
    this.$el.replaceWith($newEl); 

    // then tell the view 
    this.setElement($newEl); 

    return this; 
}