ビューをページ内のすでにレンダラーであるhtmlにバインドする素晴らしい方法はありますか?
たとえば、サーバーがすべてのページhtmlをロードし、最初にページをロードするときに、renderメソッドを使用せずにそのhtmlの上にビューをロードします。
ビューをページ内のすでにレンダラーであるhtmlにバインドする素晴らしい方法はありますか?
たとえば、サーバーがすべてのページhtmlをロードし、最初にページをロードするときに、renderメソッドを使用せずにそのhtmlの上にビューをロードします。
私はあなたがやろうとしていると思うことと同じようなことをしました。私の場合、既存のフォームにバックボーン機能を追加しました。簡略化した例を次に示します。
既存のHTML:
<div id="my-app">
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" id="username" />
<input type="submit" value="Submit" />
</form>
</div>
背骨:
var MyFormView = Backbone.View.extend({
events: {
"submit form": "formHandler"
},
formHandler: function(evt) {
evt.preventDefault();
var nameVal = $('#username').val();
this.$el.append('<p>hello: ' + nameVal + '</p>');
}
});
$().ready(function(){
var myForm = new MyFormView({el: "#my-app"});
});
重要なのは、ビューを作成するときに既存のhtmlを「el」プロパティとして渡すことです。
凝った方法が何を意味するのかはわかりませんが、ビューをレンダリングする必要はありませhtml
んel
。elに割り当てるだけで、ページ上の既存の要素にビューを簡単にアタッチできます。後でビューのelを割り当てたい場合(たとえば、そのelを「切り替え」たい場合)、 setElementメソッドをel
使用して割り当てることができます。を使用すると、キャッシュされたイベントが作成され、バインドされたイベントに移動します。setElement
$el
現在何に取り組んでいるのか正確にはわかりませんが、バックボーンビューのみを使用するJSFiddleを作成しました。モデル、コレクション、ルーターについて心配する必要はありません。
これをいじって、メインページビューがどのようにコンテナにロードされているかを確認できます。
これがフィドルです:http: //jsfiddle.net/phillipkregg/tVmTM/71/