backbone.jsのタブ付き表示状態

Question

複数のトップレベルナビゲーションタブが必要なアプリがあります（フルーツ&野菜など）。クリックすると、IDが適用されます（例：#fruits）。 backbone.jsでこれにどのようにアプローチしますか？

カップルのアイデア：（機能を担う存在body_id（）と呼ばれる）ビューのルートパー

1. ：とき '＃/果物は'、コールbody_id（ 'フルーツ'）を訪れています。 （CON：DRYない、（body_idを必要とする）ルートごとに、例えば '＃/果物/：ID'

2. オプション1が、フィルタ前（https://github.com/FLOChip/backbone_router_filter）を使用して

   。

私は助けるが、良い方法があると思うことはできません。提案？

ありがとう！

Answer 1

私は、ルータに対応するすべてのビューのスーパークラスを作成した。（私は、他のビューを持っていますサブビュー、またはウィジェット）を表示します。このスーパークラスには、ビューを非表示にするために必要なすべてのスマートがあります。すべてのビューのコンテナをタブで飾ることができます。すべてのルーテッド・ビューはそのクラスから継承します。ルーテッドビューとルーターの両方は共通プールからIDについて「学習」し、アンダースコアのtemplate機能を使用してオンザフライで構築されるため、情報はDRYを維持したまま単一の場所に保存されます。

コレクション（「果物」または「野菜」についてのビュー）は永続タブであり、一部のタブ（コレクション内の個々のアイテムに関するビュー、「バナナ」または「キュウリ」）は一時的です。ルータには#/:typeと#/:type/:idを区別するためのメソッド呼び出しがあり、後者は必要に応じて作成されます。ルータ内の変数は、ビューが既に生成されているのを追跡し、そしてそれらは、ユーザーがために求められていない場合のビューを構築しないことによってメモリを保存し、構築する必要がある例：

Controller.prototype.item = function(type, id) { 
    var v, view; 
    view = ((v = this.views)[type + '.' + id]) || (v[type + '.' + id] = (
     new ItemView({model: this.collections.getByCid(type).getByCid(id)})).render()); 
    view.show(); 
} 

。なお、このイディオム（Coffeescriptからレンダリングされています）では、あなたのrenderメソッドreturn this;が重要です。これにより、新しいビューが表示される前にレンダリングされます。既存のビューはおそらく既にレンダリングされており、再レンダリングは必要ありません。エレガントなフェード/スライド/その他のものがあります。

特にピクセル完全になり、render（）はjQuery.deferredオブジェクトを返します。 .then(view.show)に電話をかけて、レンダリングが完了してから表示されることを確認してください。