Backbone入門ガイド(六):View(ビュー)

9.View(ビューコントローラ)
前の章では、ModelとCollectionについて説明しました.これらはデータ管理とインタラクションに使用されます.この章では、ビュー(View)を使用してこれらのデータをインタフェースにレンダリングする方法と、インタフェースイベントとロジックを管理する方法について説明します.
Backboneのビューでは、DOMイベントを処理したり、モデル(またはコレクション)のデータをレンダリングしたりする方法のセットが用意されています(ビュークラスを使用する前に、jQueryまたはZeptoをインポートする必要があります).
ビュークラスが提供する方法は非常に簡単で、私たちは一般的にBackboneにいます.Viewに基づいて拡張されますが、特に複雑なビュークラスであっても、インタフェースイベントやレンダリングロジックに関連する操作だけを行う必要があります.データ管理はModelとCollectionに任せ、ビジネスロジックは他のクラスで行う必要があります.
9.1ビューの定義と作成
ビューの作成方法の例を示します.
 

<div title="  " style="color:red" id="list" class="listview"></div>
<script type="text/javascript">
    var ListView = Backbone.View.extend({
        el : '#list'
    });
    var listview = new ListView();
</script>

 
 
この例では、Backboneから継承するListViewビュークラスを定義する.Viewでは、newキーワードでListViewオブジェクトをインスタンス化します.
ListViewを定義するときは、文字列形式のDOMセレクタであるべきel属性を設定しますが、ビューオブジェクトはインスタンス化されると、内部でこのセレクタによって対応するDOMオブジェクトが取得され、el属性に再格納されます.これにより、ビューの内部でthisを通過することができます.elは、関連するDOMオブジェクトにアクセスします.
各ビューオブジェクトにはDOMオブジェクトが関連付けられ、ビュー内のすべての操作がこのDOMオブジェクトに限定されます.これにより、レンダリング、非表示、削除などのビューインタフェースの制御が容易になり、ビュー内のサブ要素の検索効率が向上します.
上記の例では、idがlistのラベルは事前に用意されており、ListViewを定義する際に#listセレクタで直接参照することができるが、実際の開発ではこれらのDOMは動的に生成される可能性があり、少なくともビュークラスを定義する際には存在しない.この場合、ビューのDOMオブジェクトを別の方法で設定できます.
 

<script type="text/javascript">
    var ListView = Backbone.View.extend({
        tagName : 'div',
        className : 'listview',
        id : 'list',
        attributes : {
            title : '  ',
            style : 'color:red'
        },
        render : function() {
            this.el.innerHTML = 'Hello World!';
            document.body.appendChild(this.el);
        }
    });
    var listview = new ListView();
    listview.render();
</script>

 
 
この例を実行すると、ページに赤い文字:Hello World!が出力されます.Firebugなどのツールで現在のDOM構造を表示すると、終了ラベルの前にこのようなセグメントが多く表示されます.
 

<div title="  " style="color:red" id="list" class="listview">Hello World!</div>

 
 
このラベルは、インスタンス化時にtagName、className、id、attributesのプロパティに基づいてビューオブジェクトが自動的に作成されます.コードと組み合わせて、次のことがわかります.
 

tagNameは、新しいラベルの名前(設定されていない場合はdivラベル)

を表します.

className対応ラベルのclassスタイル属性

id対応タグのid属性

 
この3つは最も一般的なHTML属性で、ビュークラスを定義するときに直接設定することができ、さらに多くの属性を設定する必要がある場合はattributes属性で定義することができます.
ListViewインスタンスを作成した後、新しいラベルをページの末尾に追加する方法を呼び出します.そうしないと、elプロパティにのみ格納され、表示されません.
上記の2つの作成方法は、既存のDOMに対してビューを作成し、ビューを作成するときに新しいDOMを同時に作成する2つの異なるシーンで使用されるため、同時に使用しないはずです.
9.2 DOMイベントの処理
ビューの重要な特性の1つは、インタフェースイベントを自動的にバインドすることです.インタフェースラベルにイベントをバインドする方法を思い出してみましょう.次のようになります.
 

<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>

 
 
この例では,4つのボタンを1つのidがviewであるラベルに配置し,このラベルをビュークラスMyViewに関連付けた.
ビュークラスを定義するときにeventsプロパティを宣言します.これは、ビュー内のユーザーイベントのリストを表します.説明は次のとおりです.
≪イベント名セレクタ｜Event Name Selector｜ldap≫:≪イベント処理関数｜Event Processing Function｜ldap≫
イベント名はDOMオブジェクトがサポートする任意のイベントであり、セレクタはjQueryまたはZeptoがサポートする任意のセレクタ文字列(ラベルセレクタ、クラスセレクタ、idセレクタなどを含む)であり、イベント処理関数はビュークラス自体に定義されたメソッド名であるべきである.
ビューオブジェクトはeventsリストの記述を自動的に解析します.すなわち、jQueryまたはZeptoを使用してセレクタ記述のDOMオブジェクトを取得し、イベント処理関数をイベント名にバインドします.これらの操作は、ビュークラスがインスタンス化されると自動的に完了し、イベントをバインドする方法を意図的に考慮するのではなく、ビュークラス自体の構造に関心を持つことができます.
ビューのDOM構造が動的に生成されている場合、Backboneはイベントを動的にバインドおよび解除するための適切な方法を提供していますか?
eventsのイベントはdelegate()メソッドによってビューオブジェクトのel要素にバインドされ、セレクタによって記述された要素ではないので、この問題に関心を持つ必要はありません.したがって,ビュー内の構造がどんなに変化してもevents内のイベントは有効である.
(jQueryに詳しい場合は、delegate()の方法を知っているかもしれません.この方法では、実際に親要素にイベントをバインドし、イベントのバブル中にターゲットサブ要素をチェックすることでイベントをトリガーします.)
ビューオブジェクトはdelegate()メソッドでイベントをバインドします.これは、イベントに及ぼすビュー構造の変化の影響に関心を持つ必要がないことを意味します.イベント内のセレクタに対応する要素がビューのel要素内にある必要があります.そうしないと、バインドされたイベントは有効になりません.
それでも、イベントを手動でバインドおよび解除する必要がある場合があります.ビューオブジェクトにはdelegateEvents()およびundelegateEvents()メソッドが用意されています.eventsイベントリストを動的にバインドおよび解除するには、APIドキュメントを参照してください.
9.3レンダリングビューとデータ
以前は、ビューは主にインタフェースイベントのバインドとデータレンダリングに使用されていましたが、ビューオブジェクトにはレンダリングに関連するメソッドrender()が1つしか提供されておらず、論理も参照もない空のメソッドであり、独自のレンダリングロジックを実現するために再ロードする必要があります.
ビューには多くのインタフェースロジックが含まれている場合があります.ここでは、すべてのビューサブクラスがrender()メソッドを再ロードし、最終レンダリングのエントリメソッドとして使用することを推奨します.チーム開発では、規範に厳格に従って符号化することで、コードをよりよく理解し、維持することができます.