CODEWITHSUNDEEP
javascriptjquerybackbone.jsmarionette
3gwebtrain
3gwebtrain

Reputation: 15303

Backbone.Marionette - view is not rendering properly

I am doing a sample work to render the element using the data. but I am not getting my result. what is wrong here?

any one help me?

here is my code: please go for fiddle for the live demo.

html:

<div id="content" class="content"></div>

<script type="text/template" id="list">
   <%= name %>
</script>

Javascript:

var data = [
    {"name":"name1","city":"city1","age":"age1","subModel":[
        {"name":"name01","city":"city01","age":"age01","subModel":[
            {"name":"name001","city":"city001","age":"age001"}
        ]},
        {"name":"name02","city":"city02","age":"age02","subModel":[
            {"name":"name002","city":"city002","age":"age002"}
        ]},
        {"name":"name03","city":"city03","age":"age03","subModel":[
            {"name":"name003","city":"city003","age":"age003"}
        ]}
    ]}
];

var myApp = new Backbone.Marionette.Application();


myApp.addRegions({
    mainRegion:"#content"
});

var myModel = Backbone.Model.extend({
    defaults:{
        "name":"no name",
        "city":"chennai",
        "age":"10 months"
    }
});

var myCollection = Backbone.Collection.extend({
    model:myModel
});

var oneView = Backbone.Marionette.ItemView.extend({
    tagName:"li",
    template:"#list"
});

var multiView = Backbone.Marionette.CompositeView.extend({
    tagName:'ul',
    itemView:oneView
});


myApp.on('initialize:after', function(){
    var listView = new multiView({collection:data});
    myApp.mainRegion.show(listView);
});

myApp.start();

Live Demo

Upvotes: 0

Views: 125

Answers (1)

Wilbert van de Ridder
Wilbert van de Ridder

Reputation: 752

Here you go: http://jsfiddle.net/Cardiff/Y5kwM/

There are several errors here:

 var multiView = Backbone.Marionette.CompositeView.extend({  
     tagName:'ul',  
     itemView:oneView  
 });

You need to provide a template to a compositeView, otherwise use a collectionview. 

var listView = new multiView({collection:data});

You can't just set an array as a collection. You need a valid backbone collection (see fiddle).

Upvotes: 1

Related Questions