backbone.js全体を理解する

Question

EDIT：この質問はthis oneとよく似ていますが、より概念的です。

はroutesを反映した静的リンクのバウンスで単一ページのアプリケーションを想定します

<!-- Top navlist --> 
<ul class="nav nav-list"> 
    <li><a class="active" href="#/customers">Customers</a></li> 
</ul> 

<!-- Left navlist --> 
<ul class="nav nav-list"> 
    <li><a class="active" href="#/customers">Show customers</a></li> 
    <li><a href="#/customers/new">Create customer</a></li> 
</ul> 

は、私は1つ（またはそれ以上）の現在のルートに基づいて、リンクのためのclass="active"を設定する必要があります。どちらが正しいアプローチですか？

1. ゼロから、限りLinkCollectionViewとLinkViewとして、LinkとLinkCollectionモデルを作成します。これは、私には行き過ぎのようです。リンクはサーバー側に依存しないため（動的に作成されていない）、リンクは役に立たないようです。
2. LinkとLinkCollectionモデルを既存のリンクを繰り返して作成します。
3. モデルについては忘れて、手動で各経路にclass="active"を設定してください。何かのような$('body').find('a[href="#/customers"]').addClass('active')。私にコードの複製があるようです。
4. "グローバル" AppViewビューを作成し、ptのような操作を行います。 3のrender()である。

ルート定義例：

<script> 
    (function($){ 
     var MyApp = { Models : {}, Collections : {}, Views : {} }; 

     // The Router 
     MyApp.Router = Backbone.Router.extend({ 
      routes : { 
       '/customers'  : 'showCustomersView', 
       '/customers/new' : 'showCreateCustomerView' 
      }, 
      showCustomersView  : function() { 
       // Make customers links active 
      }, 
      showCreateCustomerView : function() { 
       // Make new customer links active 
      }, 
     }); 

    })(jQuery); 
</script> 

Answer 1

私は、「ベストプラクティス」に話すことはできませんが、私は、イントラアプリのリンクを表現するためだけのモデルが関与するようであることをかなり確信していますあなたは間違いなく過度の使用を意図したものではありません。

私は個人的にパターン＃4のようなことをします。私は現在働いているプロジェクトで、私はこのような小さなものになりAPPVIEWを持っている：

AppView = Backbone.View.extend({ 

    events: { 
    "click a.internal" : "handleLink" 
    }, 

    handleLink: function (event) { 
    var route = $(event.target).attr('data-route'); 
    router.navigate(route, true); 
    return false; 
    }, 

}); 

私が使用しているとして、私は、ターゲットのルートを指定するには、私のアンカータグに実際hrefプロパティを使用していませんpushState。代わりに、要素クラス、internalを使用して、アプリの内部ナビゲーションに使用されるアンカータグを示します。次に、別の任意の要素属性、routeを使用して、リンクがどこにあるべきかを示します。

リンクはその後、このようなもののようになります。余分なビットに追加

<a href="#" class="internal" data-route="projects/3">My Third Project</a>

はあなたがちょうどjQueryの/ Zepto通話中を作るの問題だろうしたいというCSSクラスを追加します handleLink。

また、私はこれが一般的な/ベストプラクティスであるとは必ずしも言えませんが、少なくとも私の目的のためには、それは十分に単純化されていて簡単です（pushStateでも動作します）。

を編集します。data-routeの構文を有効にするために、steveaxの提案を使用してください。