CODEWITHSUNDEEP
javascriptbackbone.jsmarionette
Mdd
Mdd

Reputation: 4400

Collection View is not rendering Item View

I am looking into Marionette and just starting out with it. I am not sure why my ItemView is not rendering into a <ul>. I would like to display an <li> for each model between the <ul> tags.

Here is a fiddle I created: http://jsfiddle.net/36xu0jd4/

Here is my JavaScript using and Marionette:

var data = [ 
    { "firstName": "Bill", "lastName": "Smith" }, 
    { "firstName": "Mary", "lastName": "Johnson" }, 
    { "firstName": "Sally", "lastName": "Jones" }, 
];

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

MyApp.addRegions({
    mainRegion: '#js-page'
});

var AppLayoutView = Backbone.Marionette.LayoutView.extend({
    template: '#layout-template',

    regions: {
        listContainer: '.js-list-container',
        details: '.js-details'
    }
});

var appLayoutView = new AppLayoutView()
MyApp.mainRegion.show(appLayoutView);

var AppCollectionView = Backbone.Marionette.CollectionView.extend({
    childView: AppItemView,

    collection: data
});

var AppItemView = Backbone.Marionette.ItemView.extend({
    template: '#item-vew'
});

var appCollectionView = new AppCollectionView();

appLayoutView.listContainer.show(appCollectionView);

MyApp.start();

Here is my HTML:

<div id="js-page"></div>

<script type="text/template" id="layout-template">
    <div class="js-list-container">
        List goes here
    </div>
    <div class="js-details">
        Details goes here
    </div>
</script>

<script type="text/template" id="item-view">
    Item View!!!
</script>

Upvotes: 0

Views: 586

Answers (1)

Cubed Eye
Cubed Eye

Reputation: 5631

There are 3 things wrong with your code:

1) data needs to be an instance of Backbone.Collection, should be:

var data = new Backbone.Collection([
    { "firstName": "Bill", "lastName": "Smith" }, 
    { "firstName": "Mary", "lastName": "Johnson" }, 
    { "firstName": "Sally", "lastName": "Jones" }
]);

2) You've typo's #item-vew in the AppItemView.template, should be:

var AppItemView = Backbone.Marionette.ItemView.extend({
    template: '#item-view'
});

3) AppItemView needs to be defined before AppCollectionView so the it can be used as the childView, should look like:

var AppItemView = Backbone.Marionette.ItemView.extend({
    template: '#item-view'
});

var AppCollectionView = Backbone.Marionette.CollectionView.extend({
    childView: AppItemView,

    collection: data
});

My working fiddle http://jsfiddle.net/36xu0jd4/4/

Upvotes: 3

Related Questions