1

私はBackbone.jsを初めて使用し、現在のRailsアプリに統合しようとしています。railscastのチュートリアルに従っていますが、それらを統合するのに問題があります。基本的に、私は自分のリソース（プロジェクト）を呼び出して、それらをページに表示しようとしているところです。私のルーターは次のようになります。

class Placeholder.Routers.Projects extends Backbone.Router
  routes:
    '': 'index'
    'projects/:id':'show'

  initialize: ->
    @collection = new CIS196Project.Collections.Projects()
    @collection.fetch()

  index: ->
    view = new Placeholder.Views.ProjectsIndex()
    $('#container').html(view.render().el)

  show: (id) ->
    alert "Project #{id}"

私の見解は次のようになります。

class Placeholder.Views.ProjectsIndex extends Backbone.View

  template: JST['projects/index']

  initialize: ->
    document.write(@collection)
    @collection.on('reset', @render, this)

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

私はほとんどチュートリアルから直接取ったものです。document.write(@collection)テストに追加しました。

ページをロードすると、次のエラーが発生します。

projects_index.js：17 Uncaught TypeError：undefinedのメソッド'on'を呼び出せません

fetch()ログでGETリクエストが正常に通過し、chromeのコンソールで試行すると、フェッチはサイズ1の配列を返すはずですが、代わりにそのエラーが発生するため、ルーターで正常に作成しています。コントローラからデフォルトのレールビューをロードします（これが発生する理由もわかりません。定義されたテンプレートがありますが、このエラーがスローされると、document.writeを呼び出さない限り、前のビューに戻ります。 ）。を呼び出すとdocument.write、@collection「未定義」として出力されます。

助けてくれてありがとう！

4

1 に答える 1

2

ルーターのインスタンス変数としてコレクションを作成しています。

class Placeholder.Routers.Projects extends Backbone.Router
  #...
  initialize: ->
    @collection = new CIS196Project.Collections.Projects()
    #...

しかし、あなたはそのコレクションをあなたの見解に決して与えません：

index: ->
  view = new Placeholder.Views.ProjectsIndex()
  #...

コレクションをビューに提供する場合：

index: ->
  view = new Placeholder.Views.ProjectsIndex(collection: @collection)
  #...

次にcollection、ビューにインスタンス変数があります。

細かいマニュアルから：

コンストラクター/初期化 new View([options])

[...]渡された場合、ビューmodelに直接アタッチされるいくつかの特別なオプションがあります：、、、、、、、および。collectionelidclassNametagNameattributes

したがってcollection、ビューをインスタンス化するときにオプションを指定するだけ@collectionで、ビューを取得できます。

余談console.log(@collection)ですが、よりも優れたアイデアでありdocument.write(@collection)、document.write不幸な副作用（ページ全体を消去する場合など）がありconsole.log、より読みやすい出力が生成されます。

于 2012-04-15T23:34:08.360 に答える