Template Inheritance with Hogan.js

fiddle.css

body {
	font: 94% helvetica, arial, freesans, clean, sans-serif;
}

.modal {
	height: 100%;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.modal:before {
	background: #fff;
	content: "";
	display: block;
	height: 100%;
	opacity: .75;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.modal-chrome {
	border: 1px solid #78c3f1;
	display: inline-block;
	margin-top: 5%;
	text-align: left;
}

.modal-content {
	margin: 0 20px;
	min-height: 200px;
	min-width: 400px;
}

.modal-chrome > header {
	background: #d4ecfb;
	border-bottom: 1px solid #78c3f1;
	padding: 10px 20px;
	position: relative;
}

.modal-chrome > header h3 {
	margin: 0;
}

.modal-chrome > header .close {
	color: #000;
	font-weight: bold;
	position: absolute;
	right: 20px;
	top: 10px;
	text-decoration: none;
}

.modal.bar-modal .modal-chrome > header {
	background: #999;
	border-bottom-color: #ccc;
}

.modal.bar-modal .modal-chrome {
	background: #2c2c2c;
	border: 1px solid #000;
	color: #fff;
	position: relative;
}

.modal.bar-modal footer {
	padding: 20px;
	text-align: right;
}

.modal.bar-modal footer a {
	background: #666;
	border: 1px solid #ccc;
	color: #fff;
	display: inline-block;
	margin-left: 20px;
	padding: 4px 10px;
	text-decoration: none;
}

nav.menu dl {
	border: 1px solid #78c3f1;
	margin-left: 20px;
	max-width: 150px;
}

nav.menu dt {
	background: #d4ecfb;
}

nav.menu dt,
nav.menu dd {
	border-bottom: 1px solid #78c3f1;
	margin: 0;
	padding: 5px 10px;
}

nav.menu dd:last-child {
	border: 0;
}

nav.menu a {
	text-decoration: none;
}

fiddle.html

<nav id="modal-menu" class="menu">
  <dl>
    <dt>Modal Menu</dt>
    <dd><a href="#" data-modal-name="foo-modal">Show foo!</a></dd>
    <dd><a href="#" data-modal-name="bar-modal">Show bar!</a></dd>
  </dl>
</nav>

<script>

  // template data
  var data = {
    "foo-modal": {
      "title": "Foo Modal",
      "has-close-button": true
    },
    "bar-modal": {
      "title": "Bar Modal",
      "class-names": "bar-modal"
    }
  };

  // create modal
  $("#modal-menu").on("click", "a", function (event) {
    event.preventDefault();
    var modalName = $(this).data("modal-name");
    var output = TEMPLATES[modalName].render(data[modalName], TEMPLATES);
    $("body").append(output);
  });

  // remove modal
  $(document).on("click", "a[data-js-action='remove']", function (event) {
    event.preventDefault();
    var target = $(this).data("js-target");
    $(target).remove();
  });

</script>

fiddle.js

!function () {

  var TEMPLATES = window.TEMPLATES = window.TEMPLATES || {};
  
  //  modal-layout
  TEMPLATES["modal-layout"] = Hogan.compile(' \
  <section class="modal {{ class-names }}"> \
    <div class="modal-chrome"> \
      <header> \
        <h3>{{ title }}</h3> \
        {{# has-close-button }} \
        <a href="#" class="close" data-js-action="remove" data-js-target="body > .modal">X</a> \
        {{/ has-close-button}} \
      </header> \
      <div class="modal-content"> \
        {{$ body }} \
          Default content! \
        {{/ body }} \
      </div> \
      {{$ footer }}{{/ footer }} \
    </div> \
  </section> \
  ');

  //  foo-modal
  TEMPLATES["foo-modal"] = Hogan.compile(' \
  {{< modal-layout }} \
    {{$ body }} \
      <p>This is the <b>foo</b> modal!</p> \
    {{/ body }} \
  {{/ modal-layout }} \
  ');

  //  bar-modal
  TEMPLATES["bar-modal"] = Hogan.compile(' \
  {{< modal-layout }} \
    {{$ body }} \
      <p>This is the <b>bar</b> modal!</p> \
    {{/ body }} \
    {{$ footer }} \
      <footer> \
        <a href="#" data-js-action="remove" data-js-target="body > .modal">Cancel</a> \
        <a href="#" data-js-action="remove" data-js-target="body > .modal">Okay</a> \
      </footer> \
    {{/ footer }} \
  {{/ modal-layout }} \
  ');

}();

fiddle.manifest

name: Template Inheritance with Hogan.js
description: Example of template inheritance with Hogan.js
authors:
  - Urban Faubion
resources:
  - http://code.jquery.com/jquery-2.0.0.min.js
  - http://urban.github.io/assets/javascripts/libs/hogan/hogan.min.js
normalize_css: no

http://jsfiddle.net/gh/gist/library/pure/5881295/