Menu
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
898
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
