让 Marionette 布局像主干视图一样渲染答案

【问题标题】：Getting Marionette layouts to render like backbone view让 Marionette 布局像主干视图一样渲染
【发布时间】：2014-02-25 10:02:22
【问题描述】：

我正在尝试让木偶布局像主干视图一样呈现。即，我已经声明了一个 tagName 和一个 id，我希望它基于它生成一个 dom 元素。对于这样一个简单的元素，必须为此创建一个模板存根似乎是多余的。

HTML：

<body><div id="page"></div></body>

测试代码：

var HeaderBar = Backbone.Marionette.Layout.extend({
    tagName: "div",
    id: "headerBar"

});

/*========== APP Tests ============*/
App = Marionette.Application.extend({});

var MyApp = new App();
MyApp.addRegions({
    pageRegion: "#page"
});



var header = new HeaderBar();
MyApp.pageRegion.show(header);

但是，从应用调用 show 会引发 TemplateNotFoundError。

我正在寻找一种方法让 Marionette 在没有模板的情况下渲染它，而不必占用库中的渲染函数。

【问题讨论】：

它需要一个模板的原因是你可以渲染区域。如果您没有在布局中使用区域，则应该使用 ItemView。如果是，您需要做的就是渲染区域容器

标签： javascript backbone.js marionette

【解决方案1】：

试试

var HeaderBar = Backbone.Marionette.Layout.extend({
    template: _.template("<div></div>"),
    id: "headerBar"

});

见https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.renderer.md#using-pre-compiled-templates

【讨论】：

它最终会创建一个额外的 div，因此您必须执行 _.template("") 但这确实有效。

【解决方案2】：

Layouts 需要一个模板，因为它们需要在其中渲染区域。如果您的布局没有使用任何区域，则不需要使用Layout；改用ItemView：

var HeaderBar = Backbone.Marionette.ItemView.extend({
    tagName: "div",
    id: "headerBar"
});

然后在您所在的地区正常使用它。

但是，如果您需要 HeaderBar 内的区域，那么是的，您需要一个带有 Layout 的模板。

【讨论】：