我正在研究木偶,并从头开始。我不确定为什么我的ItemView没有呈现为
- 。我想在
- 。
这是我创建的小提琴:http://jsfiddle.net/36xu0jd4/
这是我的JavaScript和Marionette:var data = [ { "firstName": "Bill", "lastName": "Smith" }, { "firstName": "Mary", "lastName": "Johnson" }, { "firstName": "Sally", "lastName": "Jones" }, ]; var MyApp = new Backbone.Marionette.Application(); MyApp.addRegions({ mainRegion: '#js-page' }); var AppLayoutView = Backbone.Marionette.LayoutView.extend({ template: '#layout-template', regions: { listContainer: '.js-list-container', details: '.js-details' } }); var appLayoutView = new AppLayoutView() MyApp.mainRegion.show(appLayoutView); var AppCollectionView = Backbone.Marionette.CollectionView.extend({ childView: AppItemView, collection: data }); var AppItemView = Backbone.Marionette.ItemView.extend({ template: '#item-vew' }); var appCollectionView = new AppCollectionView(); appLayoutView.listContainer.show(appCollectionView); MyApp.start();
这是我的HTML:<div id="js-page"></div> <script type="text/template" id="layout-template"> <div class="js-list-container"> List goes here </div> <div class="js-details"> Details goes here </div> </script> <script type="text/template" id="item-view"> Item View!!! </script>
最佳答案
您的代码有3处错误:
1)data
必须是Backbone.Collection
的实例,应为:var data = new Backbone.Collection([ { "firstName": "Bill", "lastName": "Smith" }, { "firstName": "Mary", "lastName": "Johnson" }, { "firstName": "Sally", "lastName": "Jones" } ]);
2)您在#item-vew
中打错了AppItemView.template
,应为:var AppItemView = Backbone.Marionette.ItemView.extend({ template: '#item-view' });
3)AppItemView
需要在AppCollectionView
之前定义,因此可以将其用作childView
,应类似于:var AppItemView = Backbone.Marionette.ItemView.extend({ template: '#item-view' }); var AppCollectionView = Backbone.Marionette.CollectionView.extend({ childView: AppItemView, collection: data });
我的工作提琴http://jsfiddle.net/36xu0jd4/4/
- 标记之间为每个模型显示一个