Question

我正在尝试学习如何将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>

Answer 1

代码中存在两个问题：

您必须在js代码中的ListView之前定义ItemView
js无法访问代码中的模板

模板：_.template（'＃ListViewTemplate'），

如果您用其内容替换ListViewTemplate：

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

它可以检查jsfiddle：http://jsfiddle.net/pwassqww/2/

所以问题在于您的模板定义。

木偶：未找到childViewContainer

1 个答案: