2016-04-06 10 views
0

私のように設定し、モデルのビューは以下の持っている: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); 
    } 
}); 

あなたがAppViewrenderに気付いた場合、私は最初PlayerViewをレンダリングしています次に$elAppViewの$ elに追加します。次のようにそれがメインビューにPlayerView 2回を表示していましたように私は、ここでエラー状況を期待していた。

  • まず、私はどこ同じ行に、pView
  • 第二にコンテンツを置くpView.render()にpViewの$elをメインビューに追加します。

ただし、pViewは1回だけ追加されます。これはどのように作動しますか?

私は私の質問を明確に説明しているかどうかはわかりません。必要に応じてさらにコンテキストを追加できます。あなたがpView.render()を行うと、あなたがコメントで述べたようにdiv.playerがDOMに存在すると仮定すると、

+1

'AppView'に' PlayerView'要素を追加しても、コンテンツ自体は複製されません。 'PlayerView'にコンテンツを追加してから、' PlayerView'要素(コンテナ要素+追加コンテンツ)を 'AppView'に追加します。また、Backboneのレンダリング機能は完全にあなた自身によって定義されているので、あなたがそれを定義する方法でのみ、実際にはどのようにも「機能する」わけではありません。 'el'のものはまだjavascript/jqueryです。 –

+0

説明をありがとう。私は次のことについてはわかりません:私のhtmlにはすでに 'div.player'が含まれていますので、最初に' PlayerView'にコンテンツを追加すると、それは画面上に描画されるはずです。その後、私が 'PlayerView 'の' el'を 'AppView'に追加すると' PlayerView'全体が再び画面に描画されるはずです。私が間違っていれば私を修正してください。 – akshayKhot

+1

私はあなたの混乱を理解しています。要素が別の要素に追加されると、要素は元の場所から移動します。例。 https://jsfiddle.net/guanzo/xtenekte/2/ –

答えて

2

は、それはそれの内側にテンプレートを追加します。あなたはAPPVIEWの要素(#players)にpViewの要素(div.player)を追加するとき

はその後、全体div.player#playersに移動されます。

コードは動作するはずです。

複数のプレイヤーを作成する場合は、プレーヤービューでelオプションを使用しないでください。代わりに、バックボーンによって作成された要素を装飾し、プレーヤービューの複数のインスタンスを作成する必要があります。

+0

ありがとう、今私は何が舞台裏で起こっているのか理解しています。 – akshayKhot

関連する問題