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

【问题标题】：How to render item views for a collection including an add new view?如何为包含添加新视图的集合呈现项目视图？
【发布时间】：2013-02-17 15:13:22
【问题描述】：

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

类 FastTodo.Views.TodoItemsIndex 扩展 Backbone.View 模板：JST['todo_items/index'] 埃尔：'#main' 渲染：-> $(@el).html @form_view.render() @collection.each @renderOne renderOne：（项目）-> 控制台日志（@）控制台日志（@el） $(@el).append "模型数据" 初始化：-> @collection = new FastTodo.Collections.TodoItems() @form_view = 新的 FastTodo.Views.AddTodoItem 集合：@collection @collection.bind '重置'，=> @使成为（） @collection.on 'add', (item) => @renderOne（项目） @collection.fetch()

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

我该怎么做？

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

【问题讨论】：

标签： backbone.js coffeescript

【解决方案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 方法与粗箭头绑定。

【讨论】：

谢谢！与 coffeescript 的上下文绑定现在更清晰了