バックボーンのビューは、アプリのモデルの外観を反映するために使用されます。彼らはイベントを聴き、それに応じて対応します。
次のチュートリアルでは、表示するモデルとコレクションをバインドする方法は説明しませんが、ViewがJavaScriptテンプレートライブラリ、特にUnderscore.jsの_.templateを使用する方法を主に説明します。
ここでは、jQueryを使用してDOM要素を操作します。もちろん、MootoolsやSizzleなどの他のライブラリを使用することもできますが、Backboneの公式ドキュメントでは、jQueryを使用することを推奨しています。
次に、検索ボックスを例として使用して、新しいビューを作成します。
searchview = backbone.view.extend（{initialize：function（）{alert（ "welcome to backbone！"）;}}）; var search_view = new SearchView（）;モデル、ビュー、またはコレクションのいずれであろうと、Initialize（）メソッドは、インスタンス化されると自動的に発生されます。
エル属性
EL属性は、ブラウザで作成されたDOMオブジェクトを指します。各ビューにはEL属性があります。定義されていない場合、BackboneはEL属性として空のDIV要素を作成します。
ビュー用のELプロパティを作成し、#search_containeに設定しましょう。
<div id = "search_container"> </div> <script type = "text/javascript"> searchview = backbone.view.extend（{initialize：function（）{alert（ "welcome to backbone！"）;}}）; var search_view = new SearchView（{el：$（ "＃search_container"）}）; </script>この時点で、ビューのEL属性は、IDがSearch_ContainerであるDiv要素を指します。この時点でこのDiv要素に拘束されているため、トリガーしたいイベントは、このdiv要素にある必要があります。
ロードテンプレート
バックボーンはunderscore.jsに強く依存しているため、underscore.jsで小さなテンプレートを使用できます。
次に、render（）メソッドを追加し、initialize（）で呼び出して、ビューが初期化されたときにrender（）メソッドが自動的にトリガーされるようにしましょう。
このrender（）メソッドは、jqueryを介してビューのELプロパティにテンプレートをロードします。
<script type = "text/template" id = "search_template"> <label> search </label> <入力タイプ= "テキスト" id "search_input"/> <入力タイプ= "ボタン" id = "search_button" value = "search"/> </script> <div id = "search_container"> backbone.view.extend（{initialize：function（）{this.render（）;}、render：function（）{//テンプレートvar template = _.template（ "＃search_template"）。html（）、{}）; テンプレート ）; } }）; var search_view = new SearchView（{el：$（ "＃search_container"）}）; </script>リスニングイベントを追加します
ビューのイベントプロパティを使用して、リスニングイベントを追加します。リスニングイベントは、ELプロパティの子要素にのみ追加できることを覚えています。それでは、Child Elementボタンにリッスンイベントを追加しましょう。
<script type = "text/template" id = "search_template"> <label> search </label> <入力タイプ= "テキスト" id "search_input"/> <入力タイプ= "ボタン" id = "search_button" value = "search"/> </script> <div id = "search_container"> backbone.view.extend（{initialize：function（）{this.render（）;}、render：function（）{var template = _.template（$（ "＃search_template"）。html（）、{}）; this。$ el.html（template）; dosearch：function（event）{//ボタンをクリックすると、アラートアラート（ " + $（"＃search_input "）。val（）}）; var search_view = new SearchView（{el：$（ "＃search_container"）}）; </script>パラメーターをテンプレートに渡します
テンプレートは、<％=％>の形でビューから渡されたパラメーターを使用できます。
<script type = "text/template" id = "search_template"> <！ - <％=％> - > <label> - > <label> <％= search_label％> </label> <入力タイプ= "テキスト" id = "search_input"/> <inputタイプ= "ボタン" id = "search_button" search "/>> </cript> <> < id = "search_container"> </div> <script type = "text/javascript"> searchview = backbone.view.extend（{initialize：function（）{this.render（）;}、render：function（）{//パラメータvarテンプレート= _.template（$（ "＃search_template"）。html（）、変数）; $（ "＃search_input"）。val（））; var search_view = new SearchView（{el：$（ "＃search_container"）}）; </script>DOMイベントを処理します
視野の非常に重要な特徴は、インターフェイスイベントを自動的にバインドするのを支援することです。イベントをバインドしてタグをインターフェイスする方法を思い出してください。多分それはこんな感じです：
<p> <入力タイプ= "button" value = "" id "create" /> <input type = "button" bulate "balue =" read "id =" read " /> <入力タイプ="ボタン "value" value "value =" update "id =" update " /> <入力タイプ="ボタン "value =" delete "id =" delete " /> < /p> <"> javascript "> createdAta（） readData（）{// TODO}関数updatedata（）{// todo} function deletedata（）{// todo} function deletedata（）{// todo} $（ '＃create'）。 $（ '＃read'）。on（ 'click'、readdata）; $（ '＃update'）。on（ 'click'、updatedata）; $（ '＃delete'）。on（ 'click'、deletedata）; </script>これは、jQueryを介したDOMイベントを結合する典型的な例です。複雑なアプリケーションを開発しているか、開発している場合は、これらのコードを何らかの方法でより良く整理しようとした可能性があります。
Backboneのビューオブジェクトは、DOMとイベントの関係をより適切に維持するためのイベントの自動バインディングメカニズムを提供します。次の例を見てみましょう。
<p id = "view"> <input type = "button" value = "create" "id =" create " /> <input type =" button "value =" read "id =" read " /> <input =" button "value =" uppro量 "id =" update " /> <入力タイプ="ボタン "Value =" delete "id =" delete " /> < /p> <script =" /javascript "> javascript"> javascript " backbone.view.extend（{el： '#view'、events：{'click＃create'： 'createdata'、 'click＃read'： 'readdata'、 'click＃delete'、 'click #delete'： 'deletedata'}、createdata：createdata（）{// dodo}、redo updatedata：function（）{// todo}、deletedata：function（）{// todo}、deletedata：function（）{// todo}}）; var View = new MyView（）; </script>この例では、4つのボタンをIDビューを持つタグに入れ、このタグをビュークラスMyViewに関連付けます。
ビュークラスを定義するとき、ビュー内のユーザーイベントのリストを表すイベントプロパティを宣言し、次のように説明されています。
イベント名セレクター：イベントハンドラー機能イベント名は、DOMオブジェクトでサポートされる任意のイベント、セレクターはjQueryまたはZepto（ラベルセレクター、クラスセレクター、IDセレクターなどを含む）でサポートされるセレクター文字列であり、イベントハンドラーはビュークラス自体で定義されたメソッド名である必要があります。
ビューオブジェクトは、イベントリストの説明を自動的に解析します。つまり、jQueryまたはzeptoを使用してセレクターによって記述されたDOMオブジェクトを取得し、イベントハンドラー関数をイベント名にバインドします。これらの操作は、ビュークラスがインスタンス化されると自動的に完了します。イベントにバインドする方法を意図的に検討するのではなく、ビュークラス自体の構造についてさらに注意することができます。
あなたが心配するかもしれない別の問題：ビューのDOM構造が動的に生成された場合、バックボーンは動的な結合およびアンインストールイベントに対応する方法を提供しますか？
実際、イベントのイベントは、セレクターによって記述された要素ではなく、Delegate（）メソッドを介してビューオブジェクトのEL要素に縛られているため、この問題について心配する必要はありません。したがって、ビュー内の構造がどのように変化しても、イベントのイベントは有効です。
（jQueryに精通している場合は、Delegate（）メソッドが提供する場合があります。この方法は、実際にイベントを親層要素に結合し、イベントバブル中にターゲットチャイルド要素をチェックすることでイベントをトリガーします。）
ビューオブジェクトは、Delegate（）メソッドを介してイベントをバインドします。つまり、イベントに対するビュー構造の変更の影響を気にする必要はありません。また、イベントのセレクターに対応する要素がビューのEL要素内にある必要があります。そうしないと、バインドされたイベントが有効になりません。
それにもかかわらず、手動でバインドし、relegateEvents（）およびunrelegateEvents（）メソッドが動的にバインドおよび未成年度のイベント（）に使用される必要がある場合があります。
ビューとデータをレンダリングします
ビューは、主にインターフェイスイベントのバインディングとデータレンダリングに使用されます。ただし、ビューオブジェクトはrender（）に関連するrender（）メソッドのみを提供し、ロジックのない空のメソッドであり、どこにも参照されません。独自のレンダリングロジックを実装するには、オーバーロードする必要があります。
ビューには、多くのインターフェイスロジックが含まれている場合があります。すべてのビューサブクラスがrender（）メソッドを過負荷にし、最終レンダリングのエントリメソッドとして使用することをお勧めします。チーム開発では、仕様に従って厳密にコーディングすることで、他の人がコードをよりよく理解し維持するのに役立ちます。