htmlのレンダラにバックボーンビューをバインドする

Question

ページ内の既にレンダリングされているHTMLにビューをバインドするファンシーな方法はありますか？

例サーバーがすべてのページhtmlを読み込むと、最初にページを読み込むときにレンダリングメソッドを使用せずにそのHTMLの上にビューを読み込みます。

Answer 1

私はあなたがやろうとしていると思うものに類似した何かをやりました。私の場合は、既存のフォームの上にバックボーンの機能を追加しました。

既存の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を渡しています。

Answer 2

私が現在取り組んでいることははっきりしませんが、モデルやコレクションやルーターは心配する必要がなく、バックボーンビューのみを利用するJSFiddleを作成しました。

これを使用して再生し、メインページビューがそのコンテナにどのように読み込まれているかを確認できます。ここで

はフィドルです：http://jsfiddle.net/phillipkregg/tVmTM/71/

Answer 3

ファンシーメソッドの意味がわかりませんが、あなたの意見ではelのhtmlをレンダリングする必要はありません。ページ上の既存の要素にビューを簡単にアタッチするには、それをelに割り当てるだけです。後でビューのelを割り当てたい場合（「スイッチ」とするとel）、setElementメソッドを使用します。 setElementを使用すると、キャッシュされた$elが作成され、バインドされたすべてのイベントが移動されます。