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

window.x に割り当てているため、.hamlc ファイルの @collection 変数にアクセスできる場合。.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 に答える