Вопрос по javascript – Магистральное табличное представление, потребляющее представление строки - как структурировать?

11

У меня есть коллекция моделей, которые я хочу отобразить в виде таблицы. Каждая модель должна быть представлена одной строкой в таблице, и эта строка должна быть сгенерирована с использованием шаблона. Я должен иметь возможность прикрепить обработчики событий к этой строке (скажем, щелкнуть), чтобы при оповещении о событии появлялась некоторая конкретная информация о модели, связанной с этой строкой.

Обычный способ, которым я видел подобные вещи, состоит в том, чтобы разбить каждую строку на собственное представление и иметь родительское представление (скажем, таблицу в этом случае), используя представление строки, чтобы сгенерировать html для включения в него. ваш код. Однако я не могу понять, как это работает с шаблонами.

В этом случае я не могу прикрепить события конкретно к RowView, так как он не имеет ссылки на элемент dom (this.el для магистрали), он просто возвращает строку. Как мне достичь того, чего я хочу, используя шаблон с максимальной емкостью?

Вопрос заключается не только в событиях, шаблонах или использовании вложенных представлений, но скорее в правильном способе использования Backbone для достижения такого рода результатов.

Пример кода (также виграть на скрипке):

<code>/** 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 '<tr>' + 
                '<td>' + this.model.get('name') + '</td>' + 
                '<td>' + this.model.get('age') + '</td>' +
               '</tr>';
    }
});

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();
</code>

Спасибо!

Ваш Ответ

1   ответ
11

Один из способов обработки иерархии представлений состоит в том, чтобы каждое представление отображало своих потомков и добавляло их к своимel , События затем обрабатываются каждым представлением в соответствии с его моделью / коллекцией.

Внедрить ваш HTML как видel и, таким образом, контролировать элемент контейнера, вы можете использоватьSetElement метод

setElement view.setElement(element)

If you'd like to apply a Backbone view to a different DOM element, use setElement, which will also create the cached $el reference and move the view's delegated events from the old element to the new one.

Ваш пример может быть переписан как

var rowTemplate=_.template("<tr>"+
     "<td class='name'><%= name %></td>"+
     "<td class='age'><%= age %></td>"+
     "</tr>");

/** View representing a table */
var TableView = Backbone.View.extend({
    tagName: 'table',

    initialize : function() {
        _.bindAll(this,'render','renderOne');
    },
    render: function() {
        this.collection.each(this.renderOne);
        return this;
    },
    renderOne : function(model) {
        var row=new RowView({model:model});
        this.$el.append(row.render().$el);
        return this;
    }
});

/** View representing a row of that table */
var RowView = Backbone.View.extend({  
    events: {
        "click .age": function() {console.log(this.model.get("name"));}
    },

    render: function() {
        var html=rowTemplate(this.model.toJSON());
        this.setElement( $(html) );
        return this;
    }
});

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});
$("body").append( tableView.render().$el );

И скрипкаhttp://jsfiddle.net/9avm6/5/

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededthisError: User Rate Limit Exceeded
setElementError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы