新しく作成されたDOM要素にバックボーンビューを再割り当て

Question

私は、BackboneをCoffeeScriptとHandlebarsと組み合わせて使用​​して検索結果ページを作成しています。 2つのビューがあります.1つは結果リスト（ListView）、もう1つは単一の結果（ResultView）です。簡体字コード：

ListView = Backbone.View.extend 
    el: $("ul#results") 
    ... 

    addItem: (result) -> 
    resultView = new ResultView({ 
     model: result 
    }) 
    resultView.parentView = this 
    this.el.append(resultView.render().el) 

ResultView = Backbone.View.extend 
    tagName: "li" 
    className: "result" 
    events: 
    ... 

短い説明：

は、リストビューは結果がリストビューに追加され ul#results

に割り当てられている

• 、ResultViewが作成され、その親の知識を持っており、レンダリングそれ自体
• 要素についてli.resultが作成されました（デフォルトのバックボーン動作）

これは（簡体字）私は、検索結果をレンダリングするために使用しているテンプレートです：私は、私のバックボーンResultViewにli.resultを定義と中：あなた自身を発見したかもしれないとして、ここでは

<li class="result"> 
    <h1> 
    <a href="{{link}}">{{title}}</a> 
    </h1> 
    <p>{{snippet}}</p> 
</li> 

は、私の難問です私のテンプレート。私ははは何をすることはできません。

• バインドResultView私のテンプレートでli.resultに、それはDOM
• にはまだ存在していないので、私はまだそれを必要とするので、私のテンプレートからli.resultを削除しますJavaScriptが有効になっていないユーザーのためにページサーバー側をレンダリングする

要素をインスタンス化した後、要素にBackboneビューを（エレガントに）再割り当てする方法はありますか？単純に言えば、ResultViewを一時要素に参照し、テンプレートをレンダリングしてからul#resultに移動できますか？それとも私はそれを間違った方法で見ていますか？

ありがとうございます！

Answer 1

私は単にあなたのビューからレンダリングされたイベントをトリガーして、そのようなonRenderedコールバックで、あなたの操作を実行することをお勧め：ご返信用

initialize: function() { 
    this.bind('rendered', onRendered); 
}, 

onRendered: function() { 
    // do onRendered stuff 
    // eg. remove an element from the template 
}, 

render: function() { 
    // your render stuff 
    this.trigger('rendered'); 
} 

Answer 2

私は、サーバー側のレンダリングビューとクライアント側のビューをサポートしようとすると、やや複雑になることがわかりました。ここで説明しているシナリオはその完璧な例です。

可能であれば、ページのレンダリングをクライアント側に移すと、コードを単純化するのに大いに役立ちます。

サーバからレンダリングされたビューを保持したければ、サーバからすべてのオブジェクトを取得するためにページがロードされた後に、おそらくコレクションでfetch（）を実行すると言われています。次に、次のチェックを行うためにResultView初期化関数を調整することができます。

次に、一意のIDを含むようにテンプレートを変更します。

<li id="result_{{id}}" class="result"> 
     <h1> 
     <a href="{{link}}">{{title}}</a> 
     </h1> 
     <p>{{snippet}}</p> 
    </li> 

このように、ResultViewは新しい要素をページにレンダリングする前に既存の要素を探します。 @elプロパティを再割り当てした後にdelegateEvents（）を手動で呼び出すと、定義したイベントは引き続き動作します。