Handlebars task

compiled.js

function (Handlebars, depth0, helpers, partials, data) {
  helpers = helpers || Handlebars.helpers;
  var buffer = "",
    stack1, stack2, foundHelper, tmp1, self = this,
    functionType = "function",
    helperMissing = helpers.helperMissing,
    undef = void 0,
    escapeExpression = this.escapeExpression,
    blockHelperMissing = helpers.blockHelperMissing;

  function program1(depth0, data) {

    var buffer = "",
      stack1, stack2, stack3;
    buffer += "\n  <h2>";
    foundHelper = helpers.key;
    stack1 = foundHelper || depth0.key;
    if (typeof stack1 === functionType) {
      stack1 = stack1.call(depth0, {
        hash: {}
      });
    } else if (stack1 === undef) {
      stack1 = helperMissing.call(depth0, "key", {
        hash: {}
      });
    }
    buffer += escapeExpression(stack1) + "</h2>\n";
    stack1 = "low, high";
    stack2 = {};
    stack3 = "setValue";
    stack2['label'] = stack3;
    foundHelper = helpers.set;
    stack3 = foundHelper || depth0.set;
    tmp1 = self.program(2, program2, data);
    tmp1.hash = stack2;
    tmp1.fn = tmp1;
    tmp1.inverse = self.noop;
    if (foundHelper && typeof stack3 === functionType) {
      stack1 = stack3.call(depth0, stack1, tmp1);
    } else {
      stack1 = blockHelperMissing.call(depth0, stack3, stack1, tmp1);
    }
    if (stack1 || stack1 === 0) {
      buffer += stack1;
    }
    buffer += "\n";
    return buffer;
  }

  function program2(depth0, data) {

    var buffer = "",
      stack1, stack2, stack3;
    buffer += "\n <input type=\"radio\" name=\"";
    foundHelper = helpers.key;
    stack1 = foundHelper || depth0.key;
    if (typeof stack1 === functionType) {
      stack1 = stack1.call(depth0, {
        hash: {}
      });
    } else if (stack1 === undef) {
      stack1 = helperMissing.call(depth0, "key", {
        hash: {}
      });
    }
    buffer += escapeExpression(stack1) + "\" value=\"";
    foundHelper = helpers.setValue;
    stack1 = foundHelper || depth0.setValue;
    if (typeof stack1 === functionType) {
      stack1 = stack1.call(depth0, {
        hash: {}
      });
    } else if (stack1 === undef) {
      stack1 = helperMissing.call(depth0, "setValue", {
        hash: {}
      });
    }
    buffer += escapeExpression(stack1) + "\"";
    foundHelper = helpers.setValue;
    stack1 = foundHelper || depth0.setValue;
    foundHelper = helpers.value;
    stack2 = foundHelper || depth0.value;
    foundHelper = helpers.eq;
    stack3 = foundHelper || depth0.eq;
    tmp1 = self.program(3, program3, data);
    tmp1.hash = {};
    tmp1.fn = tmp1;
    tmp1.inverse = self.noop;
    if (foundHelper && typeof stack3 === functionType) {
      stack1 = stack3.call(depth0, stack2, stack1, tmp1);
    } else {
      stack1 = blockHelperMissing.call(depth0, stack3, stack2, stack1, tmp1);
    }
    if (stack1 || stack1 === 0) {
      buffer += stack1;
    }
    buffer += "> ";
    foundHelper = helpers.setValue;
    stack1 = foundHelper || depth0.setValue;
    if (typeof stack1 === functionType) {
      stack1 = stack1.call(depth0, {
        hash: {}
      });
    } else if (stack1 === undef) {
      stack1 = helperMissing.call(depth0, "setValue", {
        hash: {}
      });
    }
    buffer += escapeExpression(stack1) + "\n";
    return buffer;
  }

  function program3(depth0, data) {


    return " checked";
  }

  buffer += "<h1>Settings</h1>\n";
  foundHelper = helpers.settings;
  stack1 = foundHelper || depth0.settings;
  foundHelper = helpers.hash;
  stack2 = foundHelper || depth0.hash;
  tmp1 = self.program(1, program1, data);
  tmp1.hash = {};
  tmp1.fn = tmp1;
  tmp1.inverse = self.noop;
  if (foundHelper && typeof stack2 === functionType) {
    stack1 = stack2.call(depth0, stack1, tmp1);
  } else {
    stack1 = blockHelperMissing.call(depth0, stack2, stack1, tmp1);
  }
  if (stack1 || stack1 === 0) {
    buffer += stack1;
  }
  buffer += "\n";
  return buffer;
}

helpers.js

Handlebars.registerHelper("hash", function (context, options) {
  return Object.keys(context).map(function (key) {
    return options.fn({
      key: key,
      value: context[key]
    });
  }).join("");
});

Handlebars.registerHelper("set", function (set, options) {
  var label = options.hash.label || value,
    res = set.split(",").map(function (value) {
      this[label] = value.trim();
      return options.fn(this);
    }, this).join("");

  delete this[label];

  return res;
});

Handlebars.registerHelper("eq", function (a, b, options) {
  if (a === b) {
    return options.fn(this);
  }
});

template.hbs

<h1>Settings</h1>
{{#hash settings}}
  <h2>{{key}}</h2>
  {{#set "low, high" label="setValue"}}
    <input type="radio" name="{{key}}" value="{{setValue}}"{{#eq value setValue}} checked{{/eq}}> {{setValue}}
  {{/set}}
{{/hash}}

thanks @mmchaney. so, the spirit of my question was actually to see how templating engines handled these various complications altogether in one task (as most sample/example code deals individually, and the devil is usually in the details). You've shown how to have an outer loop (which I agree with), and you've shown how to make an inline conditional decision (which I don't like), but how would you do an inner loop?

Would it look something like this?

<h1>Settings</h1>
{{#hash settings}}
   <h2>{{key}}</h2>
   {{#set ["low","high"]}}
      <input type="radio" name="{{ ??? }}" value="{{ ??? }}"{{#equals value value="low"}} checked{{/equals}>{{ ??? }}
   {{/set}}
{{/hash}}

And if that's how it would look, how woudl the implement of #set look?

clarification of the spirit of my original scenario question: https://gist.github.com/3696453#gistcomment-570903

@getify I've implemented set and made the inline condition a bit cleaner. It seems like Handlebars only allows passing strings into block helpers so it does not look perfect.

awesome, thanks for the help clarifying!