1

サクセスメソッドでバックボーンビューを2つの異なる場所に同時に追加しようとすると、2番目の追加のみが機能します。なぜなのかご存知ですか？

$(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

elhtmlバックボーンviewが生成する 1 つの要素に対応します。その html 要素に、別のバックボーンviewまたはレンダリングされた html 天気をさらに追加できますtemplate。

したがって、あなたの場合、elが 2 回アタッチされている場合、最終的に dom ツリーに最後にアタッチされた場所にとどまります。複数の場所にアタッチする場合は、バックボーンを 2 回インスタンス化する必要があると思いますview。

于 2013-03-14T19:10:45.630 に答える
0

私の意見では、あなたが話しているビューは、その遠い親やいとこについて知っているべきではなく、むしろ「私は新しいコンテンツを持っています」というイベントをトリガーする必要があります。

ビューとそのhtml表現には違いがあるとはいえ、「。new-content-holder」を配置し、このセレクターをelとして渡すhtml内の2つの場所を取得するように、アプリを設計できます。作成時のあなたの見解の。次に、明示的にプログラミングしなくても、2つの場所が同時に更新されます。たとえば、長いリストのページ付けをリストの上下に表示したい場合などに、この手法を使用することがあります。

いくつかの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 に同意します。同じノードを 2 つの要素に挿入することはできません。最終的に、ノードは新しい要素に移動します。方法の 1 つは、挿入する要素から HTML を取得し、同じ HTML を 2 回挿入することです。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 に答える