javascript - Marionette:未找到 childViewContainer

Question

我正在尝试学习如何使用带有 Backbone 的 Marionette。我不确定为什么会收到以下错误:Uncaught ChildViewContainerMissingError:未找到指定的“childViewContainer”:ul

这是我的代码的一个 fiddle :http://jsfiddle.net/e7L822c8/

这是我的 JavaScript:

window.App = new Backbone.Marionette.Application();

App.addRegions({
  mainRegion: '.js-page'
});

App.start();

var TheModel = Backbone.Model.extend({});

var TheCollection = Backbone.Collection.extend({
  model: TheModel,
});

var ListView = Backbone.Marionette.CompositeView.extend({
  tagName: 'div',

  className: 'js-list-container',

  template: _.template( '#ListViewTemplate' ),

  childViewContainer: 'ul',

  childView: ItemView
});

var ItemView = Backbone.Marionette.ItemView.extend({
  initialize: function() { 
    console.log('this.model =',this.model); 
    console.log(this);      
  },

  tagName: 'li',

  className: 'list-item',

  template: _.template( '#ItemViewTemplate' )
});

var dataArray = [
  {"name":"FirstObject"},{"name":"SecondObject"},{"name":"ThirdObject"}
];

var theCollection = new TheCollection(dataArray);
var listView = new ListView({collection: theCollection});

App.mainRegion.show(listView);

这是我的 HTML:

<div class="js-page">
</div>

<script type="text/template" id="ListViewTemplate">
  <h3>Here is a list</h3>
  <ul class="js-list">

  </ul>
</script>

<script type="text/template" id="ItemViewTemplate">
  Display List Item here
</script>

Answer 1

代码中有两个问题:

1. 在 js 代码中，您必须在 ListView 之前定义 ItemView

2. js 无法访问代码中的模板

   模板:_.template('#ListViewTemplate'),

如果用 ListViewTemplate 的内容替换它:

template: _.template( "<h3>Here is a list</h3><ul class='js-list'></ul>" ),

检查 jsfiddle 是否有效:http://jsfiddle.net/pwassqww/2/

所以问题出在你的模板定义上。