2

我有一个使用 Backbone.js 和 HAML 作为客户端模板语言的 Rails 项目。

在文件 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

如果我可以访问.hamlc 文件中的@collection 变量，因为我将它分配给window.x。为什么我无法从 .hamlc 文件访问 @collection 项目？

我需要类似的东西

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

去工作

4

1 回答 1

3

该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如果您的模板知道如何处理空集合，则此方法最有效，也许它可以检测到空集合并显示“正在加载”消息或只是说“这里还没有”。

于 2012-06-05T23:56:27.713 回答