Question

我从几天开始学习木偶，有些事情需要花费太多时间才能进入它。

我真正想知道的一件事是：为什么Marionette ItemViews必须有模板？

我做了一个Backbone TableView的简单例子。这个概念是：

表格的视图
表格行的视图
表格单元格的视图
行的集合
单元格是根据模型的属性数量制作的，这意味着如果添加/删除属性，则添加/删除新单元格，而无需进行任何更改。

这是一个小提琴http://fiddle.jshell.net/darksoulsong/4HK3D/8/，因此您可以从我所指的内容中获得更好的视角。部分代码如下：

var Model = Backbone.Model.extend({});
var Collection = Backbone.Collection.extend({
    model: Model
});

var TableCellView =  Backbone.View.extend({
    tagName: 'td',
    render: function (attr) {
        this.$el.append(attr);
        return this;
    }
});

var TableRowView = Backbone.View.extend({
    tagName: 'tr',
    addOne: function (attr) {
        var tableCell = new TableCellView();
        this.$el.append(tableCell.render(attr).$el);
    },
    render: function (model) {
        _.each(model, function (attr) {
            this.addOne(attr);
        }, this);
        return this;
    }
});

var TableView = Backbone.View.extend({
    initialize: function (options) {
        this.cols = options.cols;
    },
    tagName: 'table',
    className: 'table table-hover table-bordered',
    renderThead: function () {
        var thead = $('<thead>');
        var tr = $('<tr>');
        _.each(this.cols, function (value, index) {
            var th = $('<th>').html(value);
            tr.append(th);
        }, this);
        return thead.html(tr);
    },
    renderTbody: function (content) {
        var tbody = $('<tbody>');
        return tbody.html(content);
    },
    addOne: function (model) {
        var tableRow = new TableRowView();
        var tbody = this.renderTbody(tableRow.render(model).$el);
        this.$el.append(tbody);
    },    
    render: function () {
        this.$el.append(this.renderThead());
        this.collection.each(function (model) {
            this.addOne(model.toJSON());
        }, this);
        return this;
    }
});

var users = new Collection([
    {
        firstName: 'Jack',
        lastName: 'Johnson',
        age: '34'
    }, {
        firstName: 'Georgina',
        lastName: 'Jensen',
        age: '22'
    }, {
        firstName: 'Christyne',
        lastName: 'Swanson',
        age: '43'
    }]
);

var cols = ['First Name', 'Last Name', 'Age'];

var table = new TableView({'collection': users, 'cols': cols});

$('#users').html(table.render().$el);

我知道我可以使用Marionette CompositeView，但有些事情我不知道如何处理：

CompositeView需要一个模板。我没有也不需要，因为一切都是恐怖的。
ItemView也是如此：表格单元格也是动态的。如果我添加一个集合属性，它会自动反映到视图构造中，而不必修改模板。

任何帮助都会很棒！

Answer 1

您可以使用CompositeView代替CollectionView - 它不需要模板。对于您的ItemView，您可以使用空模板：

Backbone.Marionette.ItemView.extend({
  template : _.template('')
});

但我建议创建并使用模板。

从Backbone到Marionette：桌子结构

1 个答案: