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 =＆＃34; row＆＃34;在模板的根节点中缺失。似乎木偶从我的模板中删除了根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），木偶去除了，然后我告诉牵线木偶使用第一个孩子作为布局＆＃39; el＆＃39; （根据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>'
)

木偶在布局元素上保持类

3 个答案: