木偶在布局元素上保持课程

Question

我正在尝试保留模板的完整标记，包括使用木偶区域时根节点上的类。我还试图避免创建额外的包装 div。我已经解决了这个问题，但我认为这不是令人满意的方式。

我正在创建和渲染这样的布局：

MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
    mainRegion: "#main"
});

AppLayout = Backbone.Marionette.Layout.extend({
    template: '
        <div class="row">
            <div class="col-md-8"></div>
            <div class="col-md-4"></div>
        </div>
    '
});
var layout = new AppLayout();

MyApp.mainRegion.show(layout);

layout.show(new MenuView());

结果是我的模板是这样渲染的：

<div id="main">
    <div>
        <div class="col-md-8"></div>
        <div class="col-md-4"></div>
    </div>
</div>

请注意，模板的根节点中缺少 class="row"。似乎木偶正在从我的模板中删除根 div，然后将内容包装在一个新的 div 中。

我已经设法破解了这样的解决方案

AppLayout = Backbone.Marionette.Layout.extend({
    template: '
        <div><!-- sacrificial div -->
            <div class="row">
                <div class="col-md-8"></div>
                <div class="col-md-4"></div>
            </div>
        </div>
    ',
    onRender: function () {
        // get rid of that pesky wrapping-div
        // assumes 1 child element.
        this.$el = this.$el.children();
        this.setElement(this.$el);
    }
});

我在我的模板中添加了一个额外的根 div（我的牺牲 div），木偶将其移除，然后我告诉木偶使用第一个子元素作为布局“el”（根据 Turning off div wrap for Backbone.Marionette.ItemView）。

这看起来很疯狂！

有人可以提出更好的方法吗？

编辑：n.b.我想将所有模板逻辑保留在模板中，所以不想在我的视图中使用代码来指定根节点上的类 - 如果我这样做，我最终会遇到维护问题。

Answer 1

试试

AppLayout = Backbone.Marionette.Layout.extend({
    template: '
            <div class="col-md-8"></div>
            <div class="col-md-4"></div>
    ',
    className: "row"
});

Answer 2

AppLayout 缺少其区域。

AppLayout = Backbone.Marionette.Layout.extend({
    template: '
        <div class="row">
            <div id="region1" class="col-md-8"></div>
            <div id="region2" class="col-md-4"></div>
        </div>
    ',
    regions: {
        region1: '#region1',
        region2: '#region2'
    }

});

然后在你的实例化layout:

layout.region1.show(new MenuView()); 
layout.region2.show(new MenuView()); 

Answer 3

不要将模板分配给字符串，而是将 HTML 编译成带有下划线的模板函数。像这样的：

template: _.template(
  '<div class="row">' +
    '<div class="col-md-8"></div>' +
    '<div class="col-md-4"></div>' +
  '</div>'
)