ChildView error with Marionette app

backbone.js, marionette

Solution

Looks like the problem is exactly what the error message says ;) A CollectionView is generated as a sequence of child views, and you need to tell the collection view which view type you want to use for those children.

But you haven't. Perhaps just a typo? Try changing your `CategoriesVieww` to

CategoriesVieww = Backbone.Marionette.CollectionView.extend({
    tagName: 'ul',
    className: "unstyled",
    childView: BookView    // <-- here
});

Problem

I am new to backbone and marionette, and learning that from the book `Getting Started with Backbone Marionette` by Packpub publication. I am getting the error as `Uncaught NoChildViewError: A "childView" must be specified` and my code is ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Marionette test app</title> <link rel="stylesheet" media="screen" href="{{ url_for('static', filename='bootstrap.css') }}"> <style type="text/css"> .container { margin-top: 10px; } body { padding-top: 60px; padding-bottom: 40px; } </style> </head> <body> <div id="container" class="well"> <h2>Marionette Views- CollectionView</h2> </div> <script id="categoryTemplate" type="text/template"> <a href="#<%= name%>" ><%= name%> (<%= booksOnCategory %>)</a> <button class="info">Details</button> </script> <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='bootstrap.js') }}"></script> <script src="{{ url_for('static', filename='underscore.js') }}"></script> <script src="{{ url_for('static', filename='backbone.js') }}"></script> <script src="{{ url_for('static', filename='backbone.marionette.js') }}"></script> <script type="application/javascript"> // lets create new application as below; var BookStoreApp = new Backbone.Marionette.Application(); var BookStoreController = Backbone.Marionette.Controller.extend({ displayBooks : function(){ console.log("I will display books"); } }); var BookStoreRouter = Backbone.Marionette.AppRouter.extend({ controller : BookStoreController, appRoutes : { "":"displayBooks" } }); BookStoreApp.addInitializer(function(){ var controller = new BookStoreController(); var router = new BookStoreRouter({controller: controller}); console.log("Hello from addInit"); }); BookStoreApp.on("initialize:after", function(){ if (Backbone.history){ Backbone.history.start(); console.log("hello from initialize:after.. ."); } }); BookModel = Backbone.Model.extend({ defaults : { name : "", booksOnCategory:0 } }); BookCollection = Backbone.Collection.extend({ model : BookModel }); var bookModel = new BookModel({name:"Math", booksOnCategory:3}); var bookModel2 = new BookModel({name:"Art", booksOnCategory:5}); var bookModel3 = new BookModel({name:"Science", booksOnCategory:6}); var bookModel4 = new BookModel({name:"Biology", booksOnCategory:1}); var bookCollection = new BookCollection([bookModel, bookModel2, bookModel3, bookModel4]); var BookView = Backbone.Marionette.ItemView.extend({ template : '#book-template', tagName: 'li', events:{ "mouseenter .info": "showDetails", "mouseleave .info": "hideDetails" }, showDetails: function(){ this.$(".info").popover({ title: this.model.get('name'), content: "we have "+ this.model.get("booksOnCategory") + " left" }); this.$(".info").popover("show"); }, hideDetails: function(){ this.$(".info").popover("hide"); } }); CategoriesVieww = Backbone.Marionette.CollectionView.extend({ tagName: 'ul', className: "unstyled", itemView: BookView }); var CategoriesView = new CategoriesVieww({ collection: bookCollection, el: "#container" }); CategoriesView.render(); BookStoreApp.start(); </script> </body> </html> ``` note: i am testing this app on flask-jinja2 app; so ignore the `url_for` in script tag; as they are required by the jinja2

Original source