Skip to content

Instantly share code, notes, and snippets.

@barlowm

barlowm/app.js

Created November 6, 2016 19:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save barlowm/561c48914943e7fc4d25278b18a348f9 to your computer and use it in GitHub Desktop.
Save barlowm/561c48914943e7fc4d25278b18a348f9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
let App = new Marionette.Application();
/* Load the Layout from layout.hbs */
let MyLayout = Marionette.LayoutView.extend({
template: TempLayout,
regions: {
HeaderR1: "#HeaderR"
}
});
/* Load the View from header.hbs */
let HeaderView = Marionette.ItemView.extend({
template: header,
el: "#HeaderR"
});
let container = new Marionette.Region({
el: "#Header"
});
let layout = new MyLayout();
container.show(layout);
layout.render();
let hv = new HeaderView();
layout.HeaderR1.show(hv); // Show the Header Region
App.start();
Raw
header.hbs
This is the header
Raw
index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<div id="Header"></div>
<script src="./index.js"></script>
</body>
</html>
Raw
layout.hbs
<h1>This is our layout</h1>
<p> This text is processed with Marionette. </p>
<div id="HeaderR"></div>
@scott-w
Copy link

scott-w commented Nov 6, 2016

Try the following:

let App = new Marionette.Application({
  onStart() {

      this.rm = new Marionette.RegionManager({
      regions: {
        layout: '#Header'
      }
    });

    this.rm.get('layout').show(new MyLayout());
  }
});

/* Load the Layout from layout.hbs */
let MyLayout = Marionette.LayoutView.extend({
  template: TempLayout,
  regions: {
    HeaderR1: "#HeaderR"
  },

  onRender() {
    this.showChildView('HeaderR1', new HeaderView());
  }
});

/* Load the View from header.hbs */
let HeaderView = Marionette.LayoutView.extend({
  template: header
});

App.start();

Basically, a Marionette Region gets created for you when you show views inside a region manager (or regions, which is the same thing). This means you don't need the el definition on the views or regions.

The setup means you can just showChildView to render the parts you need as and when you need them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment