2

この例の基本バージョンをCoffeeScriptで作成しようとしています：http：//davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/。すべての依存関係は、私が（本文に）書き込んだ順序で.coffeeファイルとして宣言され、jQuery+アンダースコア+バックボーン+マリオネットが先頭にあります。

私はモデル、thing.coffeeを持っています

$ ->

  console.log 'load model'

  class Thing extends Backbone.Model

    defaults:
      myValue: null

   initialize: ->
     console.log 'new thing'

  window.Thing = Thing

私の最初の問題はスコーピングです。宣言しないwindow.Thingと、次のファイル（のコレクションThings、モデルが見つからないThingなど。そこで何が間違っているのでしょうか。

私はコレクション、things.coffeeを持っています

$ ->

  console.log 'load collection'

  class Things extends Backbone.Collection

    model: Thing

  window.Things = Things

マリオネットビュー、thing_view.coffeeがあります

$ ->

  console.log 'load composite model view'

  ThingView = Backbone.Marionette.ItemView.extend(
    template: '#template-thing'
    tagName: 'tr'
  )

  window.ThingView = ThingView

マリオネットビュー、things_view.coffeeがあります

$ ->

  console.log 'load composite collection view'

  ThingsView = Backbone.Marionette.CompositeView.extend(
    tagName:  'table'
    id: 'things'
    template: '#template-things'
    itemView: ThingView
    appendHtml: (collectionView, itemView) ->
      collectionView.$('tbody').append itemView.el
  )

  window.ThingsView = ThingsView

私はアプリケーションmyapp.coffeeを持っています

$ ->

  console.log 'load app'

  # Load default data
  thingsCollection = new Things([ 
    new Thing(myValue: 'uno'), 
    new Thing(myValue: 'dos')
  ])

  data:
    thingsCollection: thingsCollection

  # Create application, specify default layouts
  MyApp = new Backbone.Marionette.Application()
  MyApp.addRegions singleRegion: '#content'

  # On application init...
  MyApp.addInitializer (data) ->
    console.log 'Init application...'
    thingsView = new ThingsView(collection: data.thingsCollection)
    MyApp.singleRegion.show data.thingsView

  # Start application
  MyApp.start data

私のhtmlファイルは次のようになります：

<div id="content">
    <script type="text/template" id="template-things">
       <thead>
          <tr class='header'>
             <th>myValue</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
    </script>
    <script type="text/template" id="template-thing">
       <td><%= myValue %></td>
    </script>
</div>

次のconsole.log：

load model
load collection
load composite model view
composite collection view
load app
Init application...
Uncaught TypeError: Cannot call method 'render' of undefined

だから、言うまでもなく、私は何が起こっているのか混乱しています-ここにはたくさんの間違いがあると確信していますので、助けてください！

4

2 に答える 2

4

これwindow.Thingは、Coffeescriptのグローバルな名前空間汚染回避の副産物です。それを回避する慣用的な方法は、名前空間を使用するAppことです。

DOMのロード時にのみクラスを初期化することは、バックボーンのアンチパターンです。クラスに名前空間を付ける場合は、クラスを正しい順序でロードする必要があり（コレクションビューの前にアイテムビュー）、ページがロードされた後ではなく、すぐに作成できます。

どこで起こっているのか教えていただけますUncaught TypeErrorか？

于 2012-05-09T23:48:42.247 に答える
1

を宣言しないwindow.Thingと、次のファイル（のコレクションThings、モデルが見つからないThingなど。そこで何が間違っているのでしょうか。

CoffeeScriptコンパイラは、各ファイルを自己実行関数でラップするためThing、に入れて強制的にグローバル化しない限り、ラッパーに対してローカルですwindow。

私はあなたの本当の問題はここにあると思います：

MyApp.addInitializer (data) ->
  console.log 'Init application...'
  thingsView = new ThingsView(collection: data.thingsCollection)
  MyApp.singleRegion.show data.thingsView

を作成してThingsViewに保存しthingsViewます。しかし、あなたはパスしようとしdata.thingsViewますが、MyApp.singleRegion.show何も入っていないdata.thingsViewので、マリオネット内の何かがしようとすると不満が出ますview.render()。私はあなたがこれを望んでいると思います：

  thingsView = new ThingsView(collection: data.thingsCollection)
  MyApp.singleRegion.show thingsView

またはこれ：

  data.thingsView = new ThingsView(collection: data.thingsCollection)
  MyApp.singleRegion.show data.thingsView

このdataオブジェクトが何であるかに応じて。

于 2012-05-09T23:49:20.827 に答える