Backbone.Viewを既存のDOM要素に接続するのは簡単です。
//get a referent to the view element
var $el = $("#foo");
//initialize new view
var view = new FooView({el:$el});
ビューは、#foo
要素のイベントと他のすべてのビューの良さを処理するようになりました。とは呼ばないでくださいview.render
。そうした場合、ビューは要素に再レンダリングされます。これは、メソッドで必要なコードを定義できないことを意味しますrender
。
どの要素がすでにDOMにあるかを見つける方法、および各ビューに対応する要素を見つける方法については、データとhtmlがどのように見えるかを正確に知らなくても、答えるのが少し複雑です。一般的なアドバイスとして、data-*
属性を使用して要素を一致させることを検討してください。
DOMツリーがあるとしましょう:
<ul id="list">
<li data-id="1">...</li>
<li data-id="2">...</li>
<li data-id="5">...</li>
</ul>
次のように、モデルをコンテナにバインド/レンダリングできます。
var view;
//container element
var $list = $("ul#list");
//find item node by "data-id" attribute
var $item = $list.find("li[data-id='" + model.id+ "']");
if($item.length) {
//element was in the DOM, so bind to it
view = new View( {el:$item, model:model} );
} else {
//not in DOM, so create it
view = new View( {model:model} ).render();
$list.append(view.el);
}