如何使用Backbone和CoffeeScript将新项目渲染到集合？

Question

我有一个小表单来添加项目，还有一个列出所有项目的集合视图。但是，我没有看到，在哪里/如何为新项目调用渲染：

表单视图：

class FastTodo.Views.AddTodoItem extends Backbone.View

  template: JST['todo_items/add_item']

  el: '#main'

  events:
    'submit': 'addItem'

  addItem: (event) ->
    event.preventDefault()
    @collection.create task: $('#task').val()

  render: ->
    $(@el).html @template()

  initialize: ->
    @collection = new FastTodo.Collections.TodoItems()
    @render()

收藏视图：

class FastTodo.Views.TodoItemsIndex extends Backbone.View

  template: JST['todo_items/index']

  render: ->
    console.log("render")

  renderOne: (item) ->
    console.log(item)

  initialize: ->
    @collection = new FastTodo.Collections.TodoItems()
    @collection.bind 'reset', =>
      @render()
    @collection.on 'add', (item) =>
      console.log('addd')
      @renderOne(item)
    @collection.fetch()

我希望控制台中的输出显示一个新项目。但是，我明白了：

如何在集合上呈现新项目？ （或显示是否触发了renderOne？）

Answer 1

您的AddTodoItem和您的TodoItemsIndex需要共享该集合的完全相同的实例。这是骨干的设计。因此，您的路由器应该创建集合的单个实例，并将其在options对象中传递给两个视图的构造函数。然后事件将正常流动，视图将保持同步。为了解决你的评论，不要将集合从一个视图传递到另一个视图，单独视图的连接应该通过共享模型/集合和路由器级别的代码来处理。

你也可以为你的应用程序和单个共享集合创建一个全局命名空间in the TodoMVC examples project here，但我个人更喜欢独立模块，而不是依赖于共享全局变量。

要考虑的另一种方法是mediator pattern as described here，尽管我认为共享集合在您的情况下更简单且完全足够。