Meteor Template layouts with yield keyword, inspired by Iron Router. Will eventually make a proper repo and port to Meteorite... stay tuned

README.md

Meteor Template layouts with yield

Example usage:

Layout.helper("modal", function (options) {
  return {
    bgcolor: options.bgcolor || "#fff",
    layout: options.layout || "modalLayout"
  };
});

<template name="modalLayout">
  <div class="modal-container">
    <div class="modal-bg"></div>
    <div class="modal-body" style="background-color: {{bgcolor}}">
      {{yield}}
    </div>
  </div>
</template>

{{#modal bgcolor='red'}}
  <p>This appears in the modal, and the bgcolor should be {{bgcolor}}.</p>
{{/modal}}

layout.js

Layout = {
  render: function (options, context) {
    if (!context.layout) return options.fn(context);

    return Template[context.layout](_.extend(context, {
      "yield": function (opts) {
        var html = options.fn(context);
        return new Handlebars.SafeString(html);
      }
    }));
  },
  helper: function (name, getOpts) {
    Handlebars.registerHelper(name, function (options) {
      var opts = _.isFunction(getOpts) && getOpts(options.hash) || {};
      var context = _.extend(opts, this);
      var layout = Layout.render(options, context);

      return new Handlebars.SafeString(layout);
    });
  }
};

package.js

Package.describe({
  summary: "Layout support with yield"
});

Package.on_use(function (api) {
  api.use([
    "handlebars",
    "underscore",
    "templating"
  ], "client");

  api.add_files([
    "layout.js"
  ], "client");

  api.export("Layout");
});