backbone and marionette, ItemView not rendering, how to?

Question

for some reason the ItemView doesn't render. Here is my setup:

controller

test: function () {
            require(['application', 'collections/collection-test', 'views/collection/view-test'], function (App, CollectionTest, ViewTest) {
                var collectionTest = new CollectionTest();

                App.regionTest.show(new ViewTest({
                    collection: collectionTest
                }));
            });
        },

collection view

define(['backbone','views/item/itemview-test'],
function (Backbone, ItemviewTest) {
    'use strict';
    return Backbone.Marionette.CollectionView.extend({
        tagName: 'ul',
        initialize: function () {},
        itemView: ItemviewTest,
        ui: {},
        events: {},
        /* on render callback */
        onRender: function () {
            console.log(this.$el);
        }
    });
});

item view

define(['backbone','hbs!tmpl/item/itemview-test_tmpl'],
function (Backbone, ItemviewTestTmpl) {
    'use strict';
    return Backbone.Marionette.ItemView.extend({
        tagName: 'li',
        initialize: function (options) {},
        template: ItemviewTestTmpl,
        ui: {},
        events: {},
        onRender: function () {
            console.log(this.$el);
        },
    });
});

i can see the <ul></ul> being added to the region, but not the li

i can render the li if i replace 'views/collection/view-test' with 'views/item/itemview-test' int eh controller, but now i won't get the ul

also, if i console.log(new ItemviewTest()) in the collection, i can see the ItemView object with the $el:'li' tag, but for some reason it doesn't get added to the html

any ideas?

Answer 1

An ItemView is rendered for each model in the parent CollectionView's collection. Since the collection is empty, there are no models to render.

Try adding a model:

var collectionTest = new CollectionTest([{ name: 'Patrioticcow' }]);

App.regionTest.show(new ViewTest({
  collection: collectionTest
}));