如何呈現包含添加新視圖的集合的項目視圖？

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方法，在這種情況下，脂肪箭頭綁定。