Dynamic layout with support for rendering dynamic templates into regions.
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
.gitignore
History.md bump version to 1.0.11 Oct 9, 2015
LICENSE.txt
README.md
default_layout.html add default layout in case one isn't set Jul 7, 2014
layout.js
layout_test.html pull in hasRegion helper Aug 12, 2014
layout_test.js
package.js
smart.json
version_conflict_errors.js

README.md

Iron.Layout

Dynamic layout with support for rendering dynamic templates into regions.

Iron.Layout is the page rendering engine for Iron.Router. Layouts can also be used independently for composing templates. For example, your app might have a standard dialog box layout and you want to populate content dynamically into the dialog box depending upon what kind of dialog it is.

Reusing Templates with a Layout

<template name="DialogBox">
  <div id="header">
    {{> yield "header"}}
  </div>
  
  <div id="main">
    {{> yield}}
  </div>
  
  <div id="footer">
    {{> yield "footer"}}
  </div>
</template>

<template name="SomeDialog">
  {{#Layout template="DialogBox" data=getSomeDataContext}}
    {{#contentFor "header"}}
      <h1>My Header</h1>
    {{/contentFor}}
    
    <p>
      The main content goes here.
    </p>
    
    {{#contentFor "footer"}}
      Footer content goes here.
    {{/contentFor}}
  {{/Layout}}
</template>

From JavaScript

<body>
  <div id="optional-container">
  </div>
</body>
if (Meteor.isClient) {
  Meteor.startup(function () {
    layout = new Iron.Layout({/* template: 'MyLayout', data: dataFunction */ });
    
    // insert the layout with an optinoal container element
    layout.insert({el: '#optional-container'});
    
    // set the template for the layout
    layout.template('DialogBox');
    
    // set the data context for the layout
    layout.data({title: 'Some Layout Title'});
    
    // render MainTemplate into the main region of the layout
    layout.render('MainTemplate');
    
    // render the MyHeader template to the 'header' region of the layout.
    layout.render('MyHeader', {to: 'header'});
    
    // render the MyFooter template to the 'footer' region of the layout. Also set a custom data context for the region.
    layout.render('MyFooter', {to: 'footer', data: {title: 'Custom footer data context'}});
  });
}

Rendering Transactions

if (Meteor.isClient) {
  Meteor.startup(function () {
    layout = new Iron.Layout({template: 'DialogBox'});
    
    // insert the layout with an optinoal container element
    layout.insert({el: '#optional-container'});
    
    // start recording which regions have been rendered into
    layout.beginRendering();
    
    // render MainTemplate into the main region of the layout
    layout.render('MainTemplate');
    
    // render the MyHeader template to the 'header' region of the layout.
    layout.render('MyHeader', {to: 'header'});
    
    // render the MyFooter template to the 'footer' region of the layout. Also set a custom data context for the region.
    layout.render('MyFooter', {to: 'footer', data: {title: 'Custom footer data context'}});
    
    // force a Deps.flush and get an object of
    // regions that have been rendered. In this case:
    // => {"main": true, "header": true, "footer": true}
    var renderedRegions = layout.endRendering();
  });
}