追加骨幹EL兩次不工作

Question

當我試圖在同一時間，以我的觀點骨幹追加到兩個不同的地方在我的成功方法只有第二附加作品。你知道爲什麼嗎？

$(content).prepend(this.$el.append(this.template({ data: data }))); 

$(chat_window).prepend(this.$el.append(this.template({ data: data }))); 

Answer 1

每個DOM節點可以有完全0或1個的父節點，從來沒有超過1。如果你追加一個節點的地方，它就會被刪除從它的當前父，然後附加到新的父。你需要的是兩個不同的視圖實例，每個實例都有自己的元素。

Answer 2

el對應於骨幹view生成的一個html元素。在這個html元素中，你可以附加更多的html天氣，它可以成爲另一個主幹view或者呈現template。

因此，在你的情況下，如果el連接兩次它最終會留在它被附着最後DOM樹。如果你想連接多個地方，那麼我想你應該實例化骨幹view兩次。

Answer 3

在我看來，你在談論不應該知道它的遠方的父母或堂兄弟，而是認爲應該觸發事件「我有新內容」，然後有興趣的意見，可以在本法他們想要的方式。

這就是說，有一個視圖和它的html表示之間的區別，你可以設計你的應用程序，讓你得到2個地方在你把「.new內容持有人」的HTML，並通過這選擇器作爲創建時的視圖。然後這兩個地方將同時更新，而不用明確編程它。我有時候會使用這種技術，例如當我想要一個長列表的分頁器被顯示在列表的上方和下方時。

一些HTML代碼：

<div class="content"> 
    <p>Recent comments</> 
    <ul class="new-content-holder"></ul> 
</div> 

<div class="chat-room"> 
    Live feed 
    <ul class="new-content-holder"> 
    <li>a chat message</li> 
    <li>another chat message</li> 
    </ul> 
</div> 

和一個視圖

.... 
var MessageView = Backbone.View.extend({ 
    template: _.template('<li class="chat-message"><%= message %></li>'), 

    prependData: function(data){ 
    this.$el.prepend(this.template(data)) 
    }, 

    onMessage: function(message) { 
    this.prependData({message: message.data}) 
    } 

}); 
.... 

//And in a super controller of sorts : 
var messageView = new MessageView(el: '.new-message-holder') 

再次，這是不是關注了很好的分離......但我希望幫助。

Answer 4

我@Peter里昂同意，你不能注入相同的節點爲兩個元素。最終，節點將移動到新元素。其中一種方法是從要注入的元素中獲取HTML，並將兩次相同的HTML注入。由於html是一個字符串，而不是一個DOM元素。你可以在很多元素中添加它。

試試這個：

var html = this.$el.append(this.template({ data: data })).html(); 
$(content).prepend(html); 
$(chat_window).prepend(html); 

我希望你不使用你的模板內的元素的ID。

PS：我不知道您的使用情況完全吻合。