Raptor Templates (Looping over properties)

settings-data.js

{
    "settings" : {
        "foo" : "low",
        "bar" : "high",
        "baz" : "low"
    }
}

settings.html

<h1>Settings</h1><h2>foo</h2><input type="radio" name="foo" value="low" checked="checked"> low<input type="radio" name="foo" value="high"> high<h2>bar</h2><input type="radio" name="bar" value="low"> low<input type="radio" name="bar" value="high" checked="checked"> high<h2>baz</h2><input type="radio" name="baz" value="low" checked="checked"> low<input type="radio" name="baz" value="high"> high

settings.js

$rset("rhtml", "test", function(helpers) {
  var empty=helpers.e,
      notEmpty=helpers.ne,
      forEachProp=helpers.fp,
      escapeXml=helpers.x,
      forEach=helpers.f;

  return function(data, context) {
    var settings=data.settings;

    context.w('<h1>Settings</h1>');

    forEachProp(settings, function(name,value) {
      context.w('<h2>')
        .w(escapeXml(name))
        .w('</h2>');

      forEach(['low', 'high'], function(option) {
        context.w('<input type="radio"')
          .a("name", name)
          .a("value", option)
          .a("checked", (value === option ? "checked" : ''))
          .w('> ')
          .w(escapeXml(option));
      });
    });
  }
});

settings.rhtml

<c:template xmlns:c="core" params="settings">
    
    <h1>Settings</h1>
    <c:for each="(name,value) in settings">
        <h2>$name</h2>
        <c:for each="option in ['low', 'high']">
            <input type="radio" name="$name" value="$option" checked="{?value === option;checked}" /> 
            $option
        </c:for>
    </c:for>
    
</c:template>