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

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方法应该返回视图实例acco遵循骨干社区公约）。

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

您可能希望参考js中的一些关于上下文的帖子来深入了解该主题（例如，this one）。

btw你可以写一些东西少代码。即，该

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

可以成为这个

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

，但你要记住你的render方法，在这种情况下，脂肪箭头绑定。