Marionette Collection View - not rendering the collection

Question

My collection view not rendering properly, instead it throw the error...

here is my code :

var ContactManager = new Marionette.Application();

        ContactManager.addRegions({
            content : "#main-region"
        })

        ContactManager.Contact = Backbone.Model.extend();

        ContactManager.Collection = Backbone.Collection.extend({
            model : ContactManager.Contact
        })

        ContactManager.ContactView = Marionette.ItemView.extend({
            template: "#contact-list-item"
        });


        ContactManager.on("start", function () {

            var contacts = new ContactManager.Collection([
                {
                    firstName: "Bob",
                    lastName: "Brigham",
                    phoneNumber: "555-"
                },
                {
                    firstName: "Alice",
                    lastName: "Arten",
                    phoneNumber: "555-0184"
                },
                {
                    firstName: "Charlie",
                    lastName: "Campbell",
                    phoneNumber: "555-0129"
                }
            ]);

            ContactManager.content.show(Marionette.CollectionView.extend({ //nothing renders here
                tagName: "ul",
                childView : ContactManager.ContactView,
                collection : contacts
            }));
        })
        ContactManager.start();

All my templates are there in DOM and I am getting an error as :

Uncaught TypeError: undefined is not a function

any one help me please?

Answer 1

You're just missing one thing, and that's when you're calling show on your content region you need to pass an instance of your collection view.

Marionette is throwing an error when it tries to bind events to your uninstantiated view.

ContactManager.ContactCollectionView = Marionette.CollectionView.extend({ //nothing renders here
  tagName: "ul",
  childView : ContactManager.ContactView,
  collection : contacts
});

ContactManager.content.show(new ContactManager.ContactCollectionView());