Представление основной таблицы, использующее представление строк -Как структурировать?

У меня есть коллекция моделей, которые я хочу отобразить в виде таблицы. Каждая модель должна быть представлена ​​одной строкой в ​​таблице, и эта строка должна быть сгенерирована с использованием шаблона. Я должен иметь возможность прикрепить обработчики событий к этой строке (, скажем, 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();

Спасибо!

11
задан oli 26 April 2012 в 07:12
поделиться