Backbone.js Collection.models не работает

Question

У меня есть проект Rails с Backbone.js и HAML в качестве языка шаблонов на стороне клиента.

в файле app/assets/views/meeting.coffee:

class window.MeetingIndex extends Backbone.View

  template: JST['meeting/index']

  render: ->
    @collection.fetch()
    @$el.html(@template(collection: @collection))
    this

в файле app/assets/javascripts/templates/meeting/index.hamlc

- console.log(@collection.length) # prints 0 in console
- console.log(@collection.models) # prints [] in console
- console.log(@collection.at(0))  # prints undefined in console
- window.x =  @collection

если я иду в консоль браузера, я получаю:

x.length # returns 2
x.models # returns [Meeting, Meeting]
x.at(0)  # returns Meeting object

Если я могу получить доступ к переменной @collection в файле.hamlc, потому что я назначаю ее для window.x. Почему я не могу получить доступ к элементам @collection из файла.hamlc?

Мне нужно что-то вроде

- for model in @collection.models
  %p= model.get('landlord_id')
  %p= model.get('tenant_id')
  %p= model.get('at')

работать

Answer 1

Collection#fetch метод является асинхронным (то есть это вызов AJAX за кулисами), поэтому @collection.fetch() не получил ничего от сервера, когда вы пытаетесь использовать его в вашем представлении. Тем не мение:

Хэш опций занимает success а также error обратные вызовы, которые будут переданы (collection, response) в качестве аргументов. Когда данные модели возвращаются с сервера, коллекция будет сброшена.

Таким образом, вы можете использовать обратные вызовы:

render: ->
  @collection.fetch(
    success: (collection, response) =>
      @$el.html(@template(collection: @collection))
  @

Или вы можете связать вид render в коллекцию reset событие:

class window.MeetingIndex extends Backbone.View
  template: JST['meeting/index']
  initialize: ->
    @collection.on('reset', @render)
    @collection.fetch()
  render: =>
    @$el.html(@template(collection: @collection))
    @

Тогда fetch позвонить в представлении initialize косвенно вызвать правильное render звонить, когда он получает что-то с сервера. Этот подход работает лучше всего, если ваш шаблон знает, что делать с пустой коллекцией, возможно, он может обнаружить пустую коллекцию и отобразить сообщение "загрузки" или просто сказать "здесь ничего нет".