t-bench2 (v15)

Revision 15 of this benchmark created by David Souther on

Description

More complicated mustache

Preparation HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js">
</script>
<script src="http://twitter.github.com/hogan.js/builds/1.0.3/hogan.js">
</script>
<script src="http://github.com/janl/mustache.js/raw/master/mustache.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="template">
  <strong>
    This is a slightly more complicated
    <span id="thing" />
    .
  </strong>
  .
  <!-- Just ignore this business. -->
  Check this out:
  <div id="hasThings">
    <ul>
      <div id="things">
        <li data-class="className" data-value="word">
        </li>
      </div>
    </ul>
    .
    <div id="not-hasThings">
      <small>
        Nothing to check out...
      </small>
    </div>
  </div>

Setup

var template = "<strong>This is a slightly more complicated {{thing}}.</strong>.\n{{! Just ignore this business. }}\nCheck this out:\n{{#hasThings}}\n<ul>\n{{#things}}\n<li class={{className}}>{{word}}</li>\n{{/things}}</ul>.\n{{/hasThings}}\n{{^hasThings}}\n\n<small>Nothing to check out...</small>\n{{/hasThings}}";
    
    var context = {
      thing: function() {
        return "blah";
      },
      things: [{
        "className": "one",
        word: "@fat"
      }, {
        "className": "two",
        word: "@dhg"
      }, {
        "className": "three",
        word: "@sayrer"
      }],
      hasThings: true
    };
    
    var handlebarsRenderer = Handlebars.compile(template);
    var hoganRenderer = Hogan.compile(template);

Test runner

Ready to run.

Testing in
TestOps/sec
Handlebars
handlebarsRenderer(context);
ready
Hogan
hoganRenderer.render(context);
ready
Mustache
Mustache.to_html(template, context);
ready
Hand-stamped
// Assume we know "everything" about the context a-priori.
var template = $("#template").clone();

$("#thing", template).text(context.thing()).attr("id", "");
if (context.hasThings) {
  $("#not-hasThings", template).remove();
  var $thingTpl = $("#things").clone();
  $("#things").remove();
  var thing, _i, _ref = context.things.length;
  for (_i = 0; _i < _ref; _i++) {
    thing = context.things[_i];
    $thingTpl
      .addClass(thing[$thingTpl.data("class")])
      .text(thing[$thingTpl.data("value")])
    }
  } else {
    $("#hasThings", template).remove();
  }
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.