まず、Marionette.js を使用しますが、コントローラーにはプレーンなオブジェクトを使用します。
アプリのコードを分割します。したがって、私の場合、メモを取るアプリがある場合、次のものがあります。
- メモを取るためのアプリ
- カテゴリを編集するアプリ
- 認証用アプリなど
アプリ、つまりメモ内で、RESTful な方法で分割します。リスト、ショーなど
リストを例にとると、私が持っているのは、アプリのこの部分を管理するためのコントローラーです。どのように?
ラインに沿った何か(マリオネットコードが表示されますが、バックボーンの方法でそれを行うことができると思いますが、おと、マリオネットを本当にお勧めします):
List.Controller =
listNotes: ->
notes = App.request "notes:entities"
App.execute "when:fetched", notes, =>
@layout = @getLayoutView()
@layout.on "show", =>
@showNotes notes
@showForm notes
App.mainRegion.show @layout
showNotes: (notes) ->
notesView = @getNotesView notes
notesView.on "childview:edit:note", (iv, note) =>
App.vent.trigger "edit:note", notes, note, @layout.formRegion
@layout.listRegion.show notesView
showForm: (notes) ->
App.execute "new:note:view", @layout.formRegion, notes
getLayoutView: ->
new List.Layout
getNotesView: (notes) ->
new List.Notes
collection: notes
コントローラーはプレーンな JavaScript オブジェクトです。何をするかというと、メモのコレクションを要求することです (マリオネットを使用していない場合は、必要に応じてメモのコレクションを取得できます)。次に、メモが取得されるまで待ちます (promise を使用)。
メモを取得したら、レイアウトを作成します (必要なものを使用できます。レイアウトのアイデアが気に入った場合は、layoutManager があります)。レイアウトが表示されたら、メモ リストとフォームを表示します (新しいメモを入力するため)。
次に、目的の領域にレイアウトを追加します (繰り返しますが、layoutManager はマリオネット以外のユーザーにも機能します)。
メモを表示するには、ビューを取得し、メモを表示したい領域に表示します (他のコードは無視します)。
ここで、すべてのものを調整するコントローラー AKA を使用する興味深い部分です。
メモの追加、メモの削除などのビジネス作業をビューに実行させたくありません...そのため、(リストのメモ ビューで) 編集メモをクリックすると、イベントをトリガーするだけです (作成できます)。 1 行のバックボーン コードを持つ独自のイベント アグリゲーター) を作成すると、コントローラーがそれをリッスンし、メモを編集するために必要な処理を実行します。私の場合、すべての RESTful コントローラーを管理するファイルにイベントをバブルアップしてから、アプリの他の部分で Edit Controller を呼び出します。
新しいメモに対して行うのと同じことです。アプリの別の部分にバブルします。
したがって、コントローラーを使用して、アプリのこの部分に必要なビューを表示します。CRUD 操作や他のルートへの遷移など、ビューに属さないビューが行う必要があることを実行します。
ルーターについて質問です。マリオネット ルーター (申し訳ありませんが、ここではマリオネットについて話します) の優れた点は、単純なオブジェクトを使用してルーターにフィードできることです。ここでの利点は何ですか?
これを想像してください:
class NotesApp.Router extends Marionette.AppRouter
appRoutes:
"": "listNotes"
API =
listNotes: ->
NotesApp.List.Controller.listNotes()
newNote: (region, notes) ->
NotesApp.New.Controller.newNote region, notes, NotesApp.categories
editNote: (region, notes, note) ->
NotesApp.Edit.Controller.editNote region, notes, note, NotesApp.categories
App.commands.setHandler "new:note:view", (region, notes) ->
API.newNote region, notes
App.vent.on "edit:note", (notes, note, region) ->
API.editNote region, notes, note
App.addInitializer ->
new NotesApp.Router
controller: API
(一部のコードを削除したので、一部のパラメーターがどこから来るのかを調べようとしないでください)。
これは、そのAPI
オブジェクトを使用して初期化される Marionette のルーターです。API
利点は、ルーターや他のコードからそのオブジェクトにアクセスできることです。
そのルートにたどり着いたとき、私はlistNotes
関数に行きます。編集と新しいビューをどのようにバブルアップしたか覚えていますか? ここで停止します。ここで、これらのイベントをリッスンし、API
オブジェクト内の適切な関数を呼び出すだけです。良い点は、新しいフォームに移動する別のルートを作成することにしたことです。ルートを追加するだけで済みます。コードはそこにあります。コードを変更する必要はありません。
うーん、これは大きな反響に終わりましたが、これなしでは私がコントローラーに与える責任を説明することができませんでした :P
最後に、マリオネットを使用することを強くお勧めします。