在setElement之後沒有委託給新元素的骨幹事件

我正在用Underscore模板實現Backbone視圖。使用setElement函數將視圖el替換爲模板html。該函數聲明說：「...將視圖的委託事件從舊元素移動到新元素」，但由於某種原因，這不起作用。任何想法，爲什麼這不工作在骨幹宣言描述？在setElement之後沒有委託給新元素的骨幹事件

下面的情況（該視圖中的相關部分）的示例：

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

來源

2017-07-06 Q D

this.template(...)不在DOM的元素。

在你的代碼，setElement從舊元素移除事件偵聽器，然後委託他們新的元素，僅在內存存在，而不是在頁面上。

您應該改爲改變當前元素的內容。

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

我需要替換模板HTML整個元素的HTML，這就是爲什麼我需要使用setElement功能。

假設你有下面的HTML：

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

添加包裝股利和移動#currentView DIV到模板。

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

來源

2017-07-06 13:30:32

好點！其實這個解決方案不適用於我的情況。我需要用模板html替換整個元素html，這就是爲什麼我需要使用setElement函數。 –

@QD在頁面中創建一個包裝元素，並將此元素根移動到模板中。 –

對不起，我沒有完全關注。你能給我更多的解釋，這將如何工作？ –

在setElement之後沒有委託給新元素的骨幹事件

回答

相關問題