sfinks_29 sfinks_29 - 3 months ago 22
jQuery Question

Marionette LayoutView regions - Display non ItemView content

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

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

Comments