JavaScriptのBackbone.jsフレームワークにおける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 オブジェクトを参照します。これが定義されていない場合、Backbone は空の div 要素を el 属性として作成します。
View の 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>

ログイン後にコピー

このとき、Viewのel属性はsearch_containerのidを持つdiv要素を参照しています。これでこの div 要素をバインドしたので、トリガーしたいイベントはすべてこの div 要素内に存在する必要があります。

テンプレートをロード
Backbone は Underscore.js に強く依存しているため、Underscore.js の小さなテンプレートを使用できます。
ここで、 render() メソッドを追加し、initialize() で呼び出して、ビューの初期化時に render() メソッドが自動的にトリガーされるようにしましょう。
この render() メソッドは、jQuery を通じてテンプレートをビューの el 属性に読み込みます。

<script type="text/template" id="search_template">
 <label>Search</label>
 <input type="text" id="search_input" />
 <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      // 通过 Underscore 编译生成模板
      var template = _.template( $("#search_template").html(), {} );
      //讲生成的模板加载到 el 属性中
      this.$el.html( template );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

ログイン後にコピー

リスニングイベントを追加
リスニングイベントを追加するには、View の events 属性を使用します。リスニングイベントは el 属性の子要素にのみ追加できることに注意してください。次に、子要素のボタンにリスナーイベントを追加しましょう。

<script type="text/template" id="search_template">
 <label>Search</label>
 <input type="text" id="search_input" />
 <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      var template = _.template( $("#search_template").html(), {} );
      this.$el.html( template );
    },
    events: {
      "click input[type=button]": "doSearch"
    },
    doSearch: function( event ){
      // 当 button 被点击时触发 alert 
      alert( "Search for " + $("#search_input").val() );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

ログイン後にコピー

パラメータをテンプレートに渡します
テンプレートは、ビューから渡されたパラメータを <%= %> の形式で使用できます。

<script type="text/template" id="search_template">
  <!-- 通过 <%= %> 形式使用传来的参数 -->
  <label><%= search_label %></label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
   SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      //定义需要传递的参数
      var variables = { search_label: "My Search" };
      // 通过 Underscore 生成模板，同时传递参数
      var template = _.template( $("#search_template").html(), variables );
      // Load the compiled HTML into the Backbone "el"
      this.$el.html( template );
    },
    events: {
      "click input[type=button]": "doSearch" 
    },
    doSearch: function( event ){
      alert( "Search for " + $("#search_input").val() );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

ログイン後にコピー

DOM イベントの処理
ビューの非常に重要な機能は、インターフェイスイベントを自動的にバインドできるようにすることです。以前にイベントをインターフェイスラベルにバインドした方法を思い出してください。次のようになります:

<p> 
  <input type="button" value="Create" id="create" /> 
  <input type="button" value="Read" id="read" /> 
  <input type="button" value="Update" id="update" /> 
  <input type="button" value="Delete" id="delete" /> 
</p> 
<script type="text/javascript"> 
  function createData() { 
    // todo 
  } 
  function readData() { 
    // todo 
  } 
  function updateData() { 
    // todo 
  } 
  function deleteData() { 
    // todo 
  } 
 
  $('#create').on('click', createData); 
  $('#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 type="button" value="Update" id="update" /> 
  <input type="button" value="Delete" id="delete" /> 
</p> 
<script type="text/javascript"> 
  var MyView = Backbone.View.extend({ 
    el : '#view', 
    events : { 
      'click #create' : 'createData', 
      'click #read' : 'readData', 
      'click #update' : 'updateData', 
      'click #delete' : 'deleteData' 
    }, 
    createData : function() { 
      // todo 
    }, 
    readData : function() { 
      // todo 
    }, 
    updateData : function() { 
      // todo 
    }, 
    deleteData : function() { 
      // todo 
    } 
  }); 
  var view = new MyView(); 
</script>

ログイン後にコピー

この例では、ビュー ID を持つラベルに 4 つのボタンを配置し、このラベルをビュークラス MyView に関連付けます。
ビュークラスを定義するときに、次のようにビュー内のユーザーイベントのリストを表す events 属性を宣言しました:

事件名称 选择器 : 事件处理函数

ログイン後にコピー

イベント名は DOM オブジェクトでサポートされている任意のイベントにすることができ、セレクターは jQuery または Zepto でサポートされている任意のセレクター文字列 (ラベルセレクター、クラスセレクター、ID セレクターなどを含む) にすることができ、イベント処理関数は次のように定義されている必要があります。ビュークラス自体のメソッド名。
ビューオブジェクトは、イベントリスト内の説明を自動的に解析します。つまり、jQuery または Zepto を使用して、セレクターによって記述された DOM オブジェクトを取得し、イベントハンドラー関数をイベント名にバインドします。これらの操作は、ビュークラスがインスタンス化されるときに自動的に完了します。イベントをバインドする方法を意図的に考える代わりに、ビュークラス自体の構造に注意を払うことができます。

You may be worried about another question: If the DOM structure of the view is dynamically generated, does Backbone provide corresponding methods for dynamically binding and unbinding events?
In fact, you don't need to worry about this issue, because the events in events are bound to the el element of the view object through the delegate() method, not the element described by the selector. Therefore, no matter how the structure within the view changes, the events in events are valid.
(If you are familiar with jQuery, you may know about the delegate() method it provides. This method actually binds the event to the parent element, and then triggers the event by checking the target child element during the event bubbling process.)
The view object binds events through the delegate() method, which means that we do not need to care about the impact of changes in the view structure on events. It also means that the element corresponding to the selector in events must be within the el element of the view, otherwise the bound The event cannot take effect.

Nonetheless, in some cases we may still need to manually bind and unbind events. The view object provides delegateEvents() and undelegateEvents() methods for dynamically binding and unbinding the event list. You can check the API documentation to do so. Learn about them.
Rendering views and data
Views are mainly used for interface event binding and data rendering. However, the view object only provides one method related to rendering, render(), and it is an empty method without any logic and not referenced anywhere. We need to overload it to implement our own rendering logic.
Views may contain a lot of interface logic. It is recommended that all view subclasses overload the render() method and use it as the entry method for final rendering. In team development, coding strictly according to specifications can help others better understand and maintain your code.

JavaScriptのBackbone.jsフレームワークにおけるViewビューの説明例_基礎知識