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

Question

我正在用 Backbone.js 和 Marionette.js 构建一个 table。我的 collection 模型在 table 中创建了行，这些行被插入到 <tbody>.

中

我想在 table 的顶部附加 1 行，这不是我的 collection 的一部分。这是之前定义的 LayoutView.

通常我只会添加另一个区域，但因为我正在使用 table，所以我无法将额外的 div 添加到 tbody 作为 [=46] =] 会将其从 table 中吐出，因为它不是 <tbody>.

中的 <tr>

下面是我在 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>

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

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

但这导致 html <tr class='target set-all-targets'></tr> 被放置在 table 的顶部，但 none 被放置在 child 元素的顶部。

Answer 1

您可以在您的合成上使用 CollectionView.addChild 方法在呈现您的集合之前插入一些内容：

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

See this fiddle 举个例子。

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

Marionette: How to prepend a LayoutView as a row into a CompositView table?

javascript

view

composite

backbone.js

marionette