2

我正在尝试在 CoffeeScript 中创建此示例的基本版本：http: //davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/。所有依赖项都按照我编写它们的顺序（在正文中）声明为 .coffee 文件，并且 jQuery + Underscore + Backbone + Marionette 在头部。

我有一个模型，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 加载时初始化您的类是Backbone 反模式。如果您命名您的类，那么您只需要确保以正确的顺序加载它们（项目视图在集合视图之前）并且它们可以立即创建而不是在页面加载之后创建。

你能告诉我们Uncaught TypeError发生的地方吗？

于 2012-05-09T23:48:42.247 回答
1

if I don't declare window.Thing, the next file (the collection of Things, can't find the model Thing, and so on. What am I doing wrong there?

The CoffeeScript compiler wraps each file in a self-executing function so Thing is local to the wrapper unless you forcibly globalize it by putting it in window.

I think your real problem is right here:

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

You create a ThingsView and store it in thingsView. But then you try to pass data.thingsView to MyApp.singleRegion.show but there's nothing in data.thingsView so you get a complaint when something inside Marionette tries to view.render(). I think you want this:

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

or this:

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

depending on what this data object is all about.

于 2012-05-09T23:49:20.827 回答