Question

有点奇怪......

我有这个系列：

class Store.Collections.Product extends Backbone.Collection

  url: '/api/products'

  model: Store.Models.Product

有了观点：

class Store.Views.Origin extends Backbone.View

  initialize: ->
    @collection = new Store.Collections.Product()
    @collection.fetch() 
    @model.bind('change:formatted', @render, this);
    @render()

  events:
    'change [name=origin]': 'setOrigin'

  el: =>
    @options.parent.$('.origin-input')[0]

  template: JST["backbone/templates/shapes/product"]

  render: ->
    $this = $(this.el)
    $this.html(@template(model: @model.toJSON(), errors: @model.errors))
    console.log(@collection)
    @collection.each(@appdenDropdown)
    @delegateEvents()
    this

  appdenDropdown: (product) ->
    console.log("append trigger")
    #view = new Store.Views.Products(model: product)
    #$('#history').append(view.render().el)

使用模板：

  <div id="history"></div>

该系列有效......

console.log(@collection)

显示数据！然而

@collection.each(@appdenDropdown)

不做任何事情，不做错误或做任何事情。它只是没有做任何事情。我试图从集合中提取数据！但它不会......

Answer 1

这是因为集合中还没有任何内容。

初始化程序中的

@collection.fetch()是一种异步方法。在迭代收集项之前，您必须等到提取完成。

fetch()函数采用在获取完成时触发的可选成功回调。

因此，您可以更新初始化程序代码，以便在调用render之前等待收集集合。这是代码。

initialize: ->
  @collection = new Store.Collections.Product()
  @collection.fetch
    success: =>
      @render()

Answer 2

其他人提到的问题是fetch是异步的，但解决方案更简单：jQuery的deferred对象：

initialize: ->
  @collection = new Store.Collections.Product()
  @collection.deferred = @collection.fetch()

  @model.bind('change:formatted', @render, this);
  @collection.deferred.done ->
    @render()

这里发生的事情是，当你调用@collection.deferred.done时，你告诉jQuery要等到集合加载之后再执行render，这就是你想要的。我认为这应该有效。

deferred上有几个很好的参考资料：

Backbone.js没有遍历集合

2 个答案: