1

当我尝试在我的成功方法中同时将我的主干视图附加到两个不同的位置时，只有第二个附加有效。你知道为什么吗？

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

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

4 回答 4

3

每个 DOM 节点可以正好有 0 个或 1 个父节点，从不超过 1 个。如果在某处附加一个节点，它会从当前父节点中删除，然后附加到新父节点。您在这里需要的是 2 个不同的视图实例，每个实例都有自己的元素。

于 2013-03-14T17:51:54.983 回答
1

el对应于主干生成的一个html元素。view在该 html 元素中，您可以附加更多的 html 天气，它是另一个主干view或渲染的template.

因此，在您的情况下，如果el附加了两次，它最终会停留在最后附加到 dom 树的位置。如果你想在多个地方附加，那么我想你应该view两次实例化主干。

于 2013-03-14T19:10:45.630 回答
0

在我看来，你所说的视图不应该知道它的远亲或表亲，而是应该触发一个事件“我有新的内容”，然后感兴趣的视图可以按照他们想要的方式进行操作。

话虽如此，视图与其 html 表示之间存在差异，您可以设计您的应用程序，以便在 html 中获得 2 个放置“.new-content-holder”的位置，并将此选择器作为 el你对创作的看法。然后这两个地方将同时更新，而无需您明确编程。我有时会使用这种技术，例如，当我希望在列表上方和下方显示长列表的分页器时。

一些 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')

同样，这不是一个很好的关注点分离......但我希望这会有所帮助。

于 2013-03-15T06:50:35.430 回答
0

我同意@Peter Lyons，您不能将同一个节点注入两个元素。最终，节点将移动到新元素。其中一种方法是从要注入的元素中获取 HTML，然后两次注入相同的 HTML。由于 html 是字符串而不是 dom 元素。您可以多次添加它，并在尽可能多的元素中添加它。

试试这个：

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

我希望您没有在模板内的元素上使用 id。

PS：我不完全了解您的用例。

于 2013-03-15T06:57:21.767 回答