如何为包含添加新视图的集合呈现项目视图？

Question

我不明白为什么在集合视图渲染中没有更新DOM：

class FastTodo.Views.TodoItemsIndex extends Backbone.View

  template: JST['todo_items/index']

  el: '#main'

  render: ->
    $(@el).html @form_view.render()
    @collection.each @renderOne

  renderOne: (item) ->
    console.log(@)
    console.log(@el)
    $(@el).append "model data"

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

这个想法是#main首先获得一个添加新表单的视图，然后将该集合附加到#main。

我该怎么做？

控制台中视图的输出如下所示：

Answer 1

1）要使@collection.each @renderOne正常工作，您需要将renderOne方法绑定到视图实例，如下所示：renderOne: (item) =>（请注意胖箭头），否则会调用它全局上下文（这就是您在控制台中看到这些Window对象的原因。

2）应该将DOM元素（而不是视图本身）插入到DOM中，因此$(@el).html @form_view.render()应该写为@$el.html @form_view.render().el（render方法应该返回视图实例。骨干社区公约）。

其他看起来很好，它应该这样工作。

您可能希望在js中引用一些关于上下文的帖子，以更深入地理解主题（例如this one）。

顺便说一句，你可以为某些东西编写更少的代码。即这个

@collection.bind 'reset', =>
  @render()
@collection.on 'add', (item) =>
  @renderOne(item)

可以成为这个

@collection.on 'reset', @render
@collection.on 'add', @renderOne

但是你应该记得在这种情况下将render方法与胖箭头绑定。