2

レンダリング、イベント処理、URL ルーターのナビゲーション、およびネットワーク アクセスを調整するためのコントローラーに興味があります。Controller が Spine で行うことと少し似ています: http://spinejs.com/docs/controllers

バックボーンの領域では、これまでのところ、Derick Bailey による記事を見つけることができました: http://lostechies.com/derickbailey/2011/08/28/dont-execute-a-backbone-js-route-handler-from -あなたのコード/

ただし、Derick のコードでは、コントローラーはルート内で使用されていないようです。また、コントローラーがバックボーン コンポーネントを調整することの利点を示す、より明確なコード例を誰かが持っているかどうか疑問に思っていましたか?

PS私はマリオネットのコントローラーを知っていますが、マリオネットの依存関係のないバックボーンコードの例を見るのは素晴らしいことです.

4

1 に答える 1

3

まず、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

最後に、マリオネットを使用することを強くお勧めします。

于 2013-05-27T10:55:03.240 に答える