У меня есть коллекция моделей, которые я хочу отобразить в виде таблицы. Каждая модель должна быть представлена одной строкой в таблице, и эта строка должна быть сгенерирована с использованием шаблона. Я должен иметь возможность прикрепить обработчики событий к этой строке (, скажем, click ), чтобы при возникновении события уведомлять о некоторой конкретной информации, касающейся модели, связанной с этой строкой.
Обычный способ, которым я видел подобные вещи, состоит в том, чтобы разбить каждую строку на ее собственное представление и иметь родительское представление (скажем, таблица в этом случае )использует представление строки для создания html для включения в код. Однако я не могу понять, как это работает с шаблонами.
В этом случае я не могу привязывать события конкретно к RowView, так как он не имеет ссылки на элемент dom(this.el
для магистрали ), он просто возвращает строку. Как я могу достичь того, чего хочу, используя шаблон на полную мощность?
Вопрос не конкретно в событиях, шаблонах или использовании вложенных представлений, а в том, как правильно использовать Backbone для достижения такого результата.
Пример кода (также в скрипке ):
/** View representing a table */
var TableView = Backbone.View.extend({
tagName: 'table',
render: function() {
var rows = _.map(this.collection.models, function(p) {
return new RowView({model: p}).render();
});
$('body').html(this.$el.html(rows.join('')));
}
});
/** View representing a row of that table */
var RowView = Backbone.View.extend({
render: function() {
// imagine this is going through a template, but for now
// lets just return straight html.
return '' +
'' + this.model.get('name') + ' ' +
'' + this.model.get('age') + ' ' +
' ';
}
});
var data = [
{'name': 'Oli', 'age': 25},
{'name': 'Sarah', 'age': 20}];
/** Collection of models to draw */
var peopleCollection = new Backbone.Collection(data);
var tableView = new TableView({collection: peopleCollection});
tableView.render();
Спасибо!