0

我正在尝试保留模板的完整标记，包括使用木偶区域时根节点上的类。我还试图避免创建额外的包装 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”（根据为 Backbone.Marionette 关闭 div 换行。项目视图）。

这似乎很疯狂！

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

编辑：nb我想将所有模板逻辑保留在模板中，所以不想在我的视图中使用代码来指定根节点上的类 - 如果我这样做，我最终会进行维护头痛。

4

3 回答 3

2

尝试

AppLayout = Backbone.Marionette.Layout.extend({
    template: '
            <div class="col-md-8"></div>
            <div class="col-md-4"></div>
    ',
    className: "row"
});
于 2013-11-04T12:33:35.797 回答
0

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());
于 2013-11-04T12:37:23.053 回答
0

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

template: _.template(
  '<div class="row">' +
    '<div class="col-md-8"></div>' +
    '<div class="col-md-4"></div>' +
  '</div>'
)
于 2013-11-04T22:29:22.950 回答