Marionette LayoutView regions - Display non ItemView content

Question

I'm currently using Marionette 2.4.7 and have my application structured using LayoutViews. Take the very simple example LayoutViews (normally the templates live separate):

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"
    }
});

Basically the page is split into two sections, a section to display page title and a section to display the main content. I populate the content region using the following:

    var layoutView = new LayoutView();

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

The ContentLayoutView has sub-regions and does quite a lot of other stuff, so is quite a complex view. The titleRegion of the MainLayoutView only displays a few words, so very simple.

Now to my question, is there a way I can get around the need to create an ItemView for the titleRegion, just to display a few words? This scenario is repeated a few times throughout my application and it seems overkill needing to create separate ItemViews for each case. I know I can set the DIV HTML using:

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

but I want to stick to the Marionette way of doing things.

I have tried:

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

but I get the error: 'view.on' is not a function, obviously because the .show is expecting an ItemView/LayoutView.

Answer 1

I would probably include the title as part of the mainLayoutView's template. I'm not sure what templating language you are using but it might look something like:

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

Then you can define a templateHelpers function in your MainLayoutView definition like:

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

When you create your MainLayoutView you would then pass in whatever title you need:

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 may actually already be a property on the view (I can't remember), so you may need to use layoutTitle or something like that in the places that I used title