CODEWITHSUNDEEP
javascriptbackbone.jsmarionette
Mdd
Mdd

Reputation: 4400

Marionette: childViewContainer was not found

I am trying to learn how to use Marionette with Backbone. I am not sure why I am getting the following error: Uncaught ChildViewContainerMissingError: The specified "childViewContainer" was not found: ul

Here's a fiddle to my code: http://jsfiddle.net/e7L822c8/

Here is my 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);

Here is my 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>

Upvotes: 0

Views: 2048

Answers (1)

Houssein C Dhayne
Houssein C Dhayne

Reputation: 101

There are two problems in the code :

  1. you have to define ItemView before ListView in your js code

  2. the js cant access the template in your code

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

if you replace ListViewTemplate by its content :

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

it works check the jsfiddle : http://jsfiddle.net/pwassqww/2/

so the problem is with your template definition .

Upvotes: 1

Related Questions