私のように設定し、モデルのビューは以下の持っている:Backbone Viewはどのようにレンダリングされますか?
var PlayerView = Backbone.View.extend({
el: "div.player",
template: _.template($("#playerTemplate").html()),
render: function() {
this.$el.append(this.template(this.model.toJSON()));
return this;
}
});
と、次のようにメインビューが設定されています
var AppView = Backbone.View.extend({
el: "#players",
render: function() {
var pView = new PlayerView({model: playerModel});
this.$el.append(pView.render().$el);
}
});
あなたがAppView
のrender
に気付いた場合、私は最初PlayerView
をレンダリングしています次に$el
をAppView
の$ elに追加します。次のようにそれがメインビューにPlayerView
2回を表示していましたように私は、ここでエラー状況を期待していた。
- まず、私はどこ同じ行に、
pView
と - 第二にコンテンツを置く
pView.render()
にpViewの$el
をメインビューに追加します。
ただし、pView
は1回だけ追加されます。これはどのように作動しますか?
私は私の質問を明確に説明しているかどうかはわかりません。必要に応じてさらにコンテキストを追加できます。あなたがpView.render()
を行うと、あなたがコメントで述べたようにdiv.player
がDOMに存在すると仮定すると、
'AppView'に' PlayerView'要素を追加しても、コンテンツ自体は複製されません。 'PlayerView'にコンテンツを追加してから、' PlayerView'要素(コンテナ要素+追加コンテンツ)を 'AppView'に追加します。また、Backboneのレンダリング機能は完全にあなた自身によって定義されているので、あなたがそれを定義する方法でのみ、実際にはどのようにも「機能する」わけではありません。 'el'のものはまだjavascript/jqueryです。 –
説明をありがとう。私は次のことについてはわかりません:私のhtmlにはすでに 'div.player'が含まれていますので、最初に' PlayerView'にコンテンツを追加すると、それは画面上に描画されるはずです。その後、私が 'PlayerView 'の' el'を 'AppView'に追加すると' PlayerView'全体が再び画面に描画されるはずです。私が間違っていれば私を修正してください。 – akshayKhot
私はあなたの混乱を理解しています。要素が別の要素に追加されると、要素は元の場所から移動します。例。 https://jsfiddle.net/guanzo/xtenekte/2/ –