javascript - javascript CoffeeScript/Backbone/Marionette 教程示例转换和作用域问题

  显示原文与译文双语对照的内容

我正在尝试在CoffeeScript中创建这里示例的基本版本: http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/。 所有依赖项都被声明为。soap文件,我写它们的顺序是( 在身体中) + 下划线+ Backbone +,。

我有一个模型,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



我有Marionette视图,thing_view.coffee


$ ->



 console.log 'load composite model view'



 ThingView = Backbone.Marionette.ItemView.extend(


 template: '#template-thing'


 tagName: 'tr'


 )



 window.ThingView = ThingView



我有Marionette视图,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



所以,不必说我对发生了什么- 我相信这里有很多错误,所以请帮助。

时间:

如果不声明 window.Thing,下一个文件( Things的集合无法找到模型 Thing,等等) 。 我在哪里出错了?

by编译器在自行执行函数中包装每个文件,以便 Thing 是本地的,除非强制将它放入 window

我想你真正的问题就在这里:


MyApp.addInitializer (data) ->


 console.log 'Init application...'


 thingsView = new ThingsView(collection: data.thingsCollection)


 MyApp.singleRegion.show data.thingsView



创建一个 ThingsView 并将它的存储在 ThingsView 中。 但是你试图传递 data.thingsViewMyApp.singleRegion.show,但是在 data.thingsView 中什么都没有,所以当 inside 子游戏机试图缓存时。 我想你想要的是


 thingsView = new ThingsView(collection: data.thingsCollection)


 MyApp.singleRegion.show thingsView



或者这个:


 data.thingsView = new ThingsView(collection: data.thingsCollection)


 MyApp.singleRegion.show data.thingsView



这取决于 data 对象的全部内容。

原作者:
...