追加骨干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：我不知道您的使用情况完全吻合。