Marionette LayoutView 区域 - 显示非 ItemView 内容

Question

我目前正在使用 Marionette 2.4.7 并使用 LayoutViews 构建我的应用程序。举一个非常简单的例子 LayoutViews（通常模板是分开的）：

var LayoutView = Marionette.LayoutView.extend({
    template: "<div id="main-region"></div><div id="menu-region"></div>",
    regions: {
        mainRegion: "#main-region",
        menuRegion: "#menu-region"
    }
});

var MainLayoutView = Marionette.LayoutView.extend({
    template: "<div id="title-region"></div><div id="content-region"></div>",
    regions: {
        titleRegion: "#title-region",
        contentRegion: "#content-region"
    }
});

页面基本上分为两部分，一部分显示页面标题，一部分显示主要内容。我使用以下内容填充内容区域：

    var layoutView = new LayoutView();

    var mainLayoutView = new MainLayoutView({ className: "someClass" });
    layoutView.mainRegion.show(mainLayoutView);
    var contentLayoutView = new ContentLayoutView();
    mainLayoutView.contentRegion.show(contentLayoutView);

ContentLayoutView 有 sub-regions 并做了很多其他事情，因此是一个相当复杂的视图。 MainLayoutView的titleRegion只显示几个字，很简单。

现在回答我的问题，有什么方法可以解决为 titleRegion 创建 ItemView 的需要，只是为了显示几个词？这种情况在我的应用程序中重复了几次，需要为每种情况创建单独的 ItemViews 似乎有点过分了。我知道我可以设置 DIV HTML 使用：

$("#title-region").html("Page title");

但我想坚持 Marionette 做事的方式。

我试过：

mainLayoutView.titleRegion.show("Page name");

但我收到错误：'view.on' is not a function，显然是因为 .show 期待 ItemView/LayoutView.

Answer 1

我可能会将标题作为 mainLayoutView 模板的一部分。我不确定您使用的是哪种模板语言，但它可能类似于：

"<div id="title-region">{title}</div><div id="content-region"></div>"

然后您可以在 MainLayoutView 定义中定义一个 templateHelpers 函数，例如：

templateHelpers: function() {
  return { title: this.options.title };
}

当您创建 MainLayoutView 时，您将传入您需要的任何标题：

var layoutView = new LayoutView();
var mainLayoutView = new MainLayoutView({
                                           className: "someClass",
                                           title: "Welcome!"
                                        });
layoutView.mainRegion.show(mainLayoutView);
var contentLayoutView = new ContentLayoutView();
mainLayoutView.contentRegion.show(contentLayoutView);

title 实际上可能已经是视图中的属性（我不记得了），因此您可能需要在那些地方使用 layoutTitle 或类似的东西我用了 title

Marionette LayoutView 区域 - 显示非 ItemView 内容

Marionette LayoutView regions - Display non ItemView content

jquery

backbone.js

marionette