Коллекция backbone + layoutmanager (базовая схема) пуста в beforeRender
Я работаю над проектом, чтобы протестировать этот базовый шаблон ( https://github.com/tbranyen/backbone-boilerplate), но у меня проблема с отображением представления. У меня первый вызов beforeRender, коллекция (фото) пуста, потому что загрузка фотографий Flickr все еще продолжается. Но когда данные загружены, я могу видеть их в функции "parse" моей Pics.Collection (с точкой останова), мой взгляд beforeRender никогда не вызывается снова.
Мой 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;
});
Мой модуль, 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 (шаблон):
<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><a href="">Home</a></li>
</ul>
</nav>
<header></header>
<aside></aside>
<section id="content"></section>
<footer>
Copyright 2013
</footer>
</main>
Я ищу, существует ли существующая проблема, на форумах и сам по себе в течение двух дней, но я не могу найти, что идет не так.
Заранее спасибо, Пьеррик.
1 ответ
Решение