javascript - Marionette: childViewContainer was not found -

javascript - Marionette: childViewContainer was not found -

i trying larn how utilize marionette backbone. not sure why getting next error: uncaught childviewcontainermissingerror: specified "childviewcontainer" not found: ul

here's fiddle code: http://jsfiddle.net/e7l822c8/

here 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 html:

<div class="js-page"> </div> <script type="text/template" id="listviewtemplate"> <h3>here list</h3> <ul class="js-list"> </ul> </script> <script type="text/template" id="itemviewtemplate"> display list item here </script>

there 2 problems in code :

you have define itemview before listview in js code

the js cant access template in code

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

if replace listviewtemplate content :

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

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

so problem template definition .

javascript backbone.js marionette