0

コレクション ビューのレンダリングで DOM が更新されない理由がわかりません。

クラス FastTodo.Views.TodoItemsIndex は Backbone.View を拡張します

  テンプレート: JST['todo_items/index']

  el: '#メイン'

  レンダリング: ->
    $(@el).html @form_view.render()
    @collection.each @renderOne

  renderOne: (アイテム) ->
    console.log(@)
    console.log(@el)
    $(@el).append "モデルデータ"

  初期化: ->
    @collection = new FastTodo.Collections.TodoItems()
    @form_view = 新しい FastTodo.Views.AddTodoItem コレクション: @collection
    @collection.bind 'リセット', =>
      @与える（）
    @collection.on 'add', (アイテム) =>
      @renderOne(アイテム)
    @collection.fetch()

#main は最初に新しいフォームを追加してビューを取得し、次にコレクションを #main に追加するという考え方です。

どうすればいいですか？

コンソールのビューの出力は次のようになります。移入されたコレクションはレンダリングされません

4

1 に答える 1

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 のコンテキストに関する投稿を参照することをお勧めします (たとえば、これ)。

ところで、いくつかのことについてより少ないコードを書くことができます。つまりこれ

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

これになれる

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

renderただし、この場合、メソッドを太い矢印でバインドすることを忘れないでください。

于 2013-03-03T15:35:36.547 に答える