0

アイテムを追加するための小さなフォームと、すべてのアイテムを一覧表示するコレクション ビューがあります。ただし、新しいアイテムのレンダリングをどこで/どのように呼び出すかはわかりません:

フォーム ビュー:

クラス FastTodo.Views.AddTodoItem は Backbone.View を拡張します

  テンプレート: JST['todo_items/add_item']

  el: '#メイン'

  イベント:
    '提出': 'addItem'

  addItem: (イベント) ->
    event.preventDefault()
    @collection.create タスク: $('#task').val()

  レンダリング: ->
    $(@el).html @template()

  初期化: ->
    @collection = new FastTodo.Collections.TodoItems()
    @与える（）

コレクション ビュー:

クラス FastTodo.Views.TodoItemsIndex は Backbone.View を拡張します

  テンプレート: JST['todo_items/index']

  レンダリング: ->
    console.log("レンダリング")

  renderOne: (アイテム) ->
    console.log(アイテム)

  初期化: ->
    @collection = new FastTodo.Collections.TodoItems()
    @collection.bind 'リセット', =>
      @与える（）
    @collection.on 'add', (アイテム) =>
      console.log('追加')
      @renderOne(アイテム)
    @collection.fetch()

コンソールの出力に新しいアイテムが表示されると思います。ただし、次のように表示されます。

コンソール出力 新しいバックボーン ビューを追加

コレクションで新しいアイテムをレンダリングするにはどうすればよいですか? (または、renderOne がトリガーされていることを示しますか?)

4

1 に答える 1

1

コレクションのまったく同じインスタンスを共有する必要がありAddTodoItemます。TodoItemsIndexバックボーンのデザインです。そのため、ルーターはコレクションのインスタンスを 1 つ作成し、オプション オブジェクトでそれを両方のビューのコンストラクターに渡す必要があります。その後、イベントは適切に流れ、ビューは同期されたままになります。また、コメントに対処するには、コレクションをあるビューから別のビューに渡さないでください。個別のビューの配線は、共有モデル/コレクションとルーターレベルのコードを介して処理する必要があります。

TodoMVC サンプル プロジェクト (こちら) で行われているように、アプリケーションのグローバル名前空間とそこに 1 つの共有コレクションを配置することもできますが、個人的には、共有グローバルに依存するすべてのものよりも独立したモジュールを好みます。

考慮すべき別のアプローチは、こちらで説明されているメディエーター パターンですが、あなたの場合は共有コレクションの方がはるかにシンプルで完全に十分だと思います。

于 2013-03-03T17:10:50.740 に答える