Backgrid: рендер не вызывается
Backgrid рендеринг
<table class="backgrid"></table>
но больше ничего Точки останова в Backgrid:render() не достигнуты. Я новичок в Backbone, адаптирующий чужой код, и поэтому не уверен, что именно должно происходить, но вызывается LayoutManager:render(). Кажется, он никогда не попадает в Backgrid... Данные, которые я хочу отобразить, извлекаются и выглядят так, как будто они в правильном формате... но нужно признать, что трудно сказать, как только они были помещены в коллекцию Backbone. Любые указатели на то, как отлаживать / почему рендеринг Backgrid не вызывается с благодарностью.
Код ниже:
ListenView.js
define([
'backbone',
'underscore',
'backgrid',
'app/models/PersonModel',
'app/collections/PersonCollection',
'app/views/PersonListView',
'hbs!app/templates/listen_template'
],
function(
Backbone,
_,
Backgrid,
Person,
PersonCollection,
PersonListView,
listenTemplate
) {
App = window.App || {};
var ListenView = Backbone.View.extend({
template: listenTemplate,
initialize: function(params) {
//fetch the list of seen people
this.model.attributes.seenPeople.fetch( {
success: function(coll, resp) {
//console.log(coll);
}
});
},
afterRender: function() {
//initialise person view
console.log("creating Backgrid");
this.seenPeopleView = new Backgrid.Grid({
columns: [{
name: "email",
label: "Email",
cell: "string"
},{
name: "id",
label: "ID",
cell: "integer"
}, {
name: "title",
label: "Title",
cell: "string" }
],
collection: this.model.attributes.seenPeople
});
this.seenPeopleView.render();
$('#seen-people-list').append(this.seenPeopleView.el);
}
2 ответа
При успешном использовании метода извлечения вы должны вызвать afterRender.
var self=this;
this.model.attributes.seenPeople.fetch( {
success: function(coll, resp) {
self.afterRender();
}
});
Вместо создания экземпляра фона в виде (this.seenPeopleView) создайте экземпляр как
var grid = new Backgrid.Grid({...<your columns and collection related code>..});
Затем визуализируйте сетку и прикрепите корень к вашему HTML-документу как
$('#seen-people-list').append(grid.render().el);
Надеюсь, это сработает:)