Marionette: childViewContainer was not found

我正在努力学习如何将Marionette与Backbone一起使用。我不确定为什么会出现以下错误：Uncaught ChildViewContainerMissingError: The specified "childViewContainer" was not found: ul

这是我的密码：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>