backbone + layoutmanager (backbone-boilerplate) collection empty in beforeRender - backbone.js

Question

I working on a project to test this backbone-boilerplate (https://github.com/tbranyen/backbone-boilerplate) but i have a problem to render a view.
I have the first call to beforeRender, the collection (pics) is empty because the fetching of Flickr photos is still in progress.
But when the data are loaded, i can see them in the "parse" function of my Pics.Collection (with a breakpoint), the beforeRender of my view is never called again.
My router.js :
define([
// Application.
"app",
"modules/pics"
],
function(app, HomePage, Pics) {
// Defining the application router, you can attach sub routers here.
var Router = Backbone.Router.extend({
initialize: function() {
// Init collections
var collections = {
pics: new Pics.Collection()
};
console.log('collec');
// Register in the router
_.extend(this, collections);
},
routes: {
"": "pics"
},
pics: function() {
this.reset();
app.useLayout().setViews({
"#content": new Pics.Views.List({ pics: this.pics }),
"header": new Backbone.View({
tagName: "span",
beforeRender: function() {
this.$el.html("Header Pics");
}
})
}).render();
this.pics.fetch();
},
reset: function() {
if (this.pics.length) {
this.pics.reset();
}
}
});
return Router;
});
My module, pics.js :
define([
"app"
], function(app) {
var Pics = app.module();
Pics.Model = Backbone.Model.extend({ });
Pics.Collection = Backbone.Collection.extend({
model: Pics.Model,
url: function() {
return "http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?";
},
cache: true,
parse: function(obj) {
return obj.items;
}
});
Pics.Views.Item = Backbone.View.extend({
template: "pics/item",
tagName: "li",
serialize: function() {
return { model: this.model };
},
initialize: function() {
this.listenTo(this.model, "change", this.render);
}
});
Pics.Views.List = Backbone.View.extend({
template: "pics/list",
serialize: function() {
return { collection: this.options.pics };
},
beforeRender: function() {
this.options.pics.each(function(pic) {
this.insertView("#pics-list", new Pics.Views.Item({
model: pic
}));
}, this);
},
initialize: function() {
this.listenTo(this.options.pics, {
"reset": this.render(),
"request": function() {
this.$("ul").parent().html("<img src='/app/img/spinner-gray.gif'>");
}
});
}
});
return Pics;
});
list.html (template) :
<h1>Liste des photos</h1>
<div>
<div class="loading"></div>
<ul id="pics-list"></ul>
</div>
item.html (template) :
<li>
<img src="<%= model.get("link") %>" />
</li>
index.html :
<main role="main" id="main">
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
<header></header>
<aside></aside>
<section id="content"></section>
<footer>
Copyright 2013
</footer>
</main>
I search if an existing issue exists, on forums and by myself since two days but i can't find what is going wrong.
Thanks in advance, Pierrick.

Answer 1

I found the problem, listen the "sync" event instead of "change".