主干表视图消耗行视图 - 如何构造？

我有一组模型希望在表格视图中呈现。每个模型应由表中的一行表示，并且该行应使用模板生成。我应该能够将事件处理程序附加到该行（例如单击），在事件发生时发出有关与该行关联的模型的一些特定信息。

我见过类似的事情的一种常见方法是将每一行分解到它自己的视图中，并有一个父视图（假设在本例中是表）使用行视图生成要包含在代码中的html 。但是我无法弄清楚这如何与模板一起使用。

在这种情况下，我无法将事件专门附加到 RowView，因为它没有引用 dom 元素（this.el对于主干），它只是返回一个字符串。如何在最大程度地使用模板的同时实现我想要的目标？

这个问题并不是专门关于事件、模板或使用嵌套视图，而是更多关于使用 Backbone 实现此类输出的正确方法。

示例代码（也在fiddle http://jsfiddle.net/9avm6/4/):

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

谢谢你！

处理视图层次结构的一种方法是让每个视图渲染其子视图并将它们附加到其子视图中el。然后，每个视图根据其模型/集合来处理事件。

将 HTML 作为视图注入el从而控制容器元素，您可以使用设置元素 http://documentcloud.github.com/backbone/#View-setElement method

设置元素 view.setElement(element)

如果您想应用 Backbone 查看不同的 DOM 元素，使用 setElement，这也将 创建缓存的 $el 引用并移动视图的委托事件 从旧元素到新元素。

你的例子可以重写为

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/ http://jsfiddle.net/9avm6/5/