Marionette: ItemView not rendered by CompositeView

Question

My ItemView is not being rendered by my CompositeView:

My app.js:

var express= require("express"),
    bodyparser= require("body-parser");

var app= express();

app.use(express.static(__dirname+ "/public"));
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended: true}));

app.get("/*", function(req, res){
        res.render("index.jade");
});

app.listen(3002);

app.js is calling index.jade:

doctype html

#nexter



script(id="tabler" type="text/template").
        <table>
            <thead>
                <tr id="check"> <td> One </td> </tr>
            </thead>

            <tbody id="tbody1">

            </tbody>
        </table>

script(id="urview", type="text/template")
        <tr> <td> <p> Many </p> </td> </tr>
        <tr> <td> <p> Any </p> </td> </tr>



script(src= "/jquery.js")
script(src= "/underscore.js")
script(src= "/backbone.js")
script(src= "/backbone.marionette.js")
script(src= "/theapp.js")

index.jade calls theapp.js:

var Usertracker= new Marionette.Application();

var Uview= Marionette.ItemView.extend({
        template: "#urview",
        el: "#tbody1"
});

var Usercompositeview= Marionette.CompositeView.extend({
        template: "#tabler",
        itemView: Uview,
        events: {
            "click #check": "eventer"
        },

        eventer: function(){
            $("p").css("background-color", "yellow");
            $("tr").css("background-color", "orange");
        }
});


Usertracker.addRegions({
        nexter: "#nexter"
});

Usertracker.addInitializer(function(){
        Usertracker.nexter.show(new Usercompositeview({}));
});

Usertracker.start();

I am gettting One as output, whose color is changing on clicking. But I cannot get Many and Any as output!

Need help, thanks!

Vijay Singh · Accepted Answer · 2015-10-15T07:43:10.720

So, the problem here was that there was no collection being passed into the CompositeView.
Following worked:
app.js

var express= require("express"),
    bodyparser= require("body-parser");

var app= express();

app.use(express.static(__dirname+ "/public"));
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended: true}));

app.get("/*", function(req, res){
        res.render("index.jade");
});

app.listen(3002);

index.jade:

doctype html

#nexter

script(id="tabler" type="text/template").
            <table id="some" style="border: 1px solid black;">
                <thead>
                    <tr id="check"> <td> One </td> </tr>
                </thead>

                <tbody id="tbody1">

                </tbody>
            </table>

script(id="urview", type="text/template").
        <tr style="border: 1px solid black;"> 
            <td style="border: 1px solid black;"> <p> Many <%=idee%> </p> </td> 
            <td style="border: 1px solid black;"> <p> Any </p> </td> 
        </tr>

script(src= "/jquery.js")
script(src= "/underscore.js")
script(src= "/backbone.js")
script(src= "/backbone.marionette.js")
script(src= "/theapp.js")

theapp.js

var Usertracker= new Marionette.Application();

var M1= Backbone.Model.extend({});

var C1= Backbone.Collection.extend({
        model: M1
});

var c1= new C1([{idee: 21}, {idee: 43}, {idee: 54}]);

var Uview= Marionette.ItemView.extend({
        template: "#urview"
});

var Usercompositeview= Marionette.CompositeView.extend({
        template: "#tabler",
        childView: Uview,
                childViewContainer: "#tbody1",
        events: {
            "click #check": "eventer",
        },

        eventer: function(){
            $("p").css("background-color", "yellow");
            $("tr").css("background-color", "orange");
        }     
});

Usertracker.addRegions({
        nexter: "#nexter"
});

Usertracker.nexter.show(new Usercompositeview({collection: c1}));

Marionette: ItemView not rendered by CompositeView

1 Answers1