Question

我正在使用Backbone.js和Marionette.js构建一个表。我的模型集合在表格中创建了行，这些行被插入<tbody>。

我想在表格的顶部添加1行，这不属于我的收藏。它是先前定义的LayoutView。

通常我只会添加另一个区域，但因为我正在使用表格，所以我无法向div添加额外的tbody，因为该表会将其从表中吐出来它不是<tr>中的<tbody>。

以下是我在CompositView的onShow函数中构建此函数的尝试：

var SetAllTargets = Backbone.Marionette.LayoutView.extend({
    template: JST["common/cubes/table/set-all-rows"],
    tagName: "tr",
    className: "set-all-targets"
});


App.Table = Marionette.CompositeView.extend({

    template: JST["common/targets/layout"],
    className: "targets",
    childView: RowTarget,
    childViewContainer: "tbody",

    regions: {
        targetsRegion: ".targets-region"
    },

    onShow: function() {
        var setAllTargetsRow = new SetAllTargets();
        var setAllTargetsRegion = "<tr class='target set-all-targets'></tr>";
        this.$el.find("tbody").prepend(setAllTargetsRegion);
        this.$el.find(".set-all-targets").show(setAllTargetsRow);
    }
)};

另一种尝试是把

<tr class='target set-all-targets'> ...child elements here </tr>

进入模板并将view.el附加到我的onShow函数中，如下所示：

    onShow: function() {    
        var setAllTargetsRow = new SetAllTargets();
        this.$el.find("tbody").prepend(setAllTargetsRow.el);
    }

但这会导致html <tr class='target set-all-targets'></tr>被放置在表格的顶部，但没有子元素。

Answer 1

您可以在复合材料上使用CollectionView.addChild方法在渲染集合之前插入内容：

onBeforeRenderCollection: function() {
    this.addChild(null, <View>, 0);
}

See this fiddle以及它的实例。

Marionette：如何将LayoutView作为一行添加到CompositView表中？

1 个答案: