2012-02-23 7 views
0

私は最初のバックボーンアプリを構築し、バックボーンが提供する構造を本当に楽しんでいます。しかし、私は他の人が解決策を見つけたと確信しています。バックボーンビューを保存する最良の方法

だから、現在、私は私が持って言うことができます、私は現在のビューのすべてを持っているのビューフォルダ内の私の「index.js」内だから、

models 
     index.js 
     user.js 
views 
     index.js 
     user.js 

のようなファイル構造を作成している

headerView 
footerView 
buttonView 

など

私は現在、1つのページアプリケーションに関連する1つの汎用「ビューjsファイル」内に複数の「ビュー」を持っています。問題は、特定のビューを見つけるのが直感的ではない、エディタを開いて正しいビューを見つけることです。

他のMVCでは、それぞれのビューを固有のファイルに保存して、適切なものとして使用します。他のユーザーも同じことをしますか?私の懸念は、複数の別々のjsファイルを持っていると思いますか?とにかく、私はグループを作成することができますが、他の人が何をしているのだろうか?

答えて

3

require.jsをご覧ください。 Hereは、あなたが始めなければならないチュートリアルです。

コアアイディアはsthです。以下のようにします。

  • 各モデル、独自のファイルに存在し、その依存関係を定義し、各モジュールの上部にmodule
  • と呼ばれているものは何でもビュー、コレクション、ルータ、他のモジュールをロードする必要があるの意味
  • require.jsを動作するようにあなたの新しいモジュールは、あなたの依存関係をロードし、あなたの自己定義された変数を経由してアクセスを保証するために

Definiton(例えばchildView.js)

define([ 
    'jQuery', 
    'Underscore', 
    'Backbone' 
], function($, _, Backbone){ 
    return Backbone.View.extend({ 
     //your usual view methods and properties 
    }); 
}); 

リユース(例えばparentView.js)

define([ 
    'jQuery', 
    'Underscore', 
    'Backbone', 
    'pathToChildView/childView.js' 
], function($, _, Backbone, ChildView){ 
    return Backbone.View.extend({ 
     // your usual view methods and properties 
     // + access to your ChildView Modul 
    }); 
}); 

あなたはモジュールのロード構文に問題がある場合はsugaredバリアントはあなたの友人かもしれません。

+0

ありがとうございます - 構文は、あまりにも使用されるようになりますが、行く方法が必要です! – Xrender

0

より良いナビゲーションのために、各オブジェクトを階層的なフォルダ内のビュー/テンプレートのペアに分けてください。次に、ビュー内に子オブジェクトを作成し、el要素を渡します。この方法で、必要に応じてプロジェクト全体で各オブジェクトを再利用できます。

+0

答えてくれてありがとうございます。私が完全に従っているかどうかはわかりませんが、詳細を教えてください。 – Xrender

+0

コンストラクタでレンダリング要素を指定することで、任意のビューから子ビューを作成してレンダリングできます。 'var childView = new ChildView({el: '.divToRenderChild'})。render();'ビューの使用に関する詳細は、ここにあります:[http://documentcloud.github.com/backbone/#View] – Moustachio

関連する問題