Javascript-木偶：如何将LayoutView作为一行放在CompositView表中？

我正在用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>被放置在表格的顶部,但没有任何子元素.

解决方法:

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

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

See this fiddle是一个实际的例子.

标签：backbone-js,marionette,view,javascript,composite
来源： https://codeday.me/bug/20191120/2041016.html