骨干表视图耗时行视图 - 如何构建？ [英] Backbone table view consuming row view - how to structure?

问题描述

我的，我想在一个表视图来渲染模型的集合。每个模式应该是由一个单一的行中的表psented重新$ P $，并应使用模板来生成该行。我应该能够将事件处理程序附加到该行（比如单击），即在事件警报关于与该行相关的模型的一些具体信息。

I have a collection of models that I wish to render in a table view. Each model should be represented by a single row in the table, and this row should be generated using a template. I should be able to attach event handlers to that row (say click), that upon event alert some specific information regarding the model associated with that row.

我见过类似的东西来完成这件事的常用方法是打破每一行，走进自己的观点，并有一个父视图（可以说在这种情况下，表）使用行视图生成HTML，包括在code。不过，我想不通这是如何工作用的模板。

A common way I've seen similar things to this done is to break each row out into it's own view, and have a parent view (lets say the table in this case) use the row view to generate the html to include in your code. However I can't figure out how this works with templates.

在这种情况下，我也没有特别重视事​​件到RowView因为它没有提到一个DOM元素（ this.el 骨干），它只是一个返回串。我怎样才能达到我想要的，同时使用模板的最大容量？

In this case, I can not attach events specifically to the RowView as it has no reference to a dom element (this.el for backbone), it simply returns a string. How can I achieve what I want, whilst using a template to maximum capacity?

现在的问题是没有明确有关事件，模板或使用嵌套的意见，但更多的使用骨干来实现这种输出的正确方法。

The question isn't specifically about events, templating or using nested views, but more about the right way to use Backbone to achieve this kind of output.

样code（也处于小提琴）：

Sample code(also in a fiddle):

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

感谢您！

推荐答案

来处理视图的层次的一种方法是让每个视图渲染它的孩子和他们追加到它的报。事件然后通过每个视图进行处理，根据其模型/集合。

One way to handle a hierarchy of views is to have each view render its children and append them to its el . The events are then handled by each view, according to its model/collection.

要注入你的HTML作为视图报，从而控制容器元素，您可以使用的 setElement 方法

To inject your HTML as the view el and thus control the container element, you can use the setElement method

setElement view.setElement（元素）

如果你想申请一个骨干
  为在不同的DOM元素，使用setElement，这也将
  创建缓存$ EL参考和移动视图的委托事件
  从旧的元件，以新的一个。

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/

这篇关于骨干表视图耗时行视图 - 如何构建？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！