how to use marionette CollectionView to fetch data deom the server? - backbone.js

Question

I am trying to create a simple Marionette(2.3.2) Application, that retrieves data from a RESTFUL web service,
What did I do wrong? how to fix this code? and what is the best structure for this sample App?
here the code on jsfiddle:
http://jsfiddle.net/kdureidy/zaze13fw/
here is my code:
var Library = new Backbone.Marionette.Application();
var LayoutView = Backbone.Marionette.LayoutView.extend({
el: 'body',
template: '#content-template',
regions: {
mainRegion: "#main-region",
collectionRegion: "#collection-region"
}
});
var Book = Backbone.Model.extend({
url: "http://localhost:9090/library-0.1/books"
});
var MyChildView = Backbone.Marionette.ItemView.extend({
model: Book,
tagName: 'li',
template: '#list-template',
});
var BooksCollection = Backbone.Collection.extend({
url: 'http://localhost:9090/library-0.1/books',
model: Book
});
var collection1 = new BooksCollection({
model: Book
});
var MyCollectionView = Backbone.Marionette.CollectionView.extend({
url: "http://localhost:9090/library-0.1/books",
tagName: 'ul',
childView: MyChildView,
collectionEvents: {
'sync': 'render'
},
});
var c = new MyCollectionView({
collection: collection1
});
Library.layout_view = new LayoutView();
Library.layout_view.render();
Library.layout_view.collectionRegion.show(c);
Library.start();
my templates are:
<script id="list-template" type="text/template">
<h2><%=title %></h2>
<span><%=author %></span>
<button>Click Here</button>
</script>
<script id="content-template" type="text/template">
<h1>This is Lesson 1</h1>
<div id="main-region" class="content">
</div>
<hr>
<div id="collection-region"></div>
</script>

Answer 1

CollectionView does not fetch data, it renders it, Backbone.Collection is the one responsible for fetching the data.
You don't need url in MyCollectionView
Marionette has collectionEvents, which you can use the same way as modelEvents, so your initialize can be replaced with
collectionEvents: {
'reset': 'render'
'change': 'render'
}
and call, which I would do separately
`collection1.fetch()` explicitly
For good Marionette app structure look at: http://www.backbonerails.com/