Conditional partials in Handlebars

Question

I have the following data that I am trying to feed into a Handlebar template

{
    "set-group": [
        {
            "label": "Source Data",
            "type": "select",
            "options": [
                {
                    "value": "Default Selections"
                },
                {
                    "value": "Other Selections"
                }
            ]
        },
        {
            "label": "Scale",
            "type": "radio",
            "options": [
                {
                    "value": "log",
                    "label": "Log",
                    "groupname": "group2"
                },
                {
                    "value": "linear",
                    "label": "Linear",
                    "groupname": "group2"
                }
            ]
        }
    ]
}

I created and registered 2 Partials, one that templates "selects" form elements and one that templates "radio" inputs. I cannot know what type of form element will be in the data so I need some sort of helper that checks if type == select and applies the appropriate partial for the select. I am having trouble with creating such a helper.

I was thinking of replacing type=select in the data to just select=true and just check for true/false using the if/else helper but I would rather keep the format standardized

Any ideas?

Answer 1

I ended up using this helper

// Comparison Helper for handlebars.js
// Pass in two values that you want and specify what the operator should be
// e.g. {{#compare val1 val2 operator="=="}}{{/compare}}

Handlebars.registerHelper('compare', function(lvalue, rvalue, options) {

    if (arguments.length < 3)
        throw new Error("Handlerbars Helper 'compare' needs 2 parameters");

    operator = options.hash.operator || "==";

    var operators = {
        '==':       function(l,r) { return l == r; },
        '===':      function(l,r) { return l === r; },
        '!=':       function(l,r) { return l != r; },
        '<':        function(l,r) { return l < r; },
        '>':        function(l,r) { return l > r; },
        '<=':       function(l,r) { return l <= r; },
        '>=':       function(l,r) { return l >= r; },
        'typeof':   function(l,r) { return typeof l == r; }
    }

    if (!operators[operator])
        throw new Error("Handlerbars Helper 'compare' doesn't know the operator "+operator);

    var result = operators[operator](lvalue,rvalue);

    if( result ) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }
  });

Source: http://doginthehat.com.au/2012/02/comparison-block-helper-for-handlebars-templates/

Answer 2

I constructed something similar:

// superclass for all form field views
App.FormFieldView = Ember.View.extend({
    classNames: 'formFieldView',
    field: null,
    ...
});

// form field with just text
App.FormFieldTextView = App.FormFieldView.extend({
    templateName: 'formfield-text',
    ...
});

// form field with checkbox
App.FormFieldCheckboxView = App.FormFieldView.extend({
    templateName: 'formfield-checkbox',
    ...
});

... and so on (have more types for date selector, select lists etc)

And then I have a field class that is used to specify the field. The trick is the typeXXX fields that I use to define what to render.

// field definition in controller.
App.Field = Ember.Object.extend({ 
    label: null,
    required: true,
    value: null,
    typeText: function () { // defaults to typeText
        return !(this.get('typeDate') || this.get('typeSelect') 
                 || this.get('typeCheckbox')
                 || this.get('typeInfo'));
    }.property('typeDate', 'typeSelect', 'typeCheckbox', 'typeInfo').cacheable()
});

Example:

var fields = [
    App.Field.create({ label: 'First name',
                       valueBinding: 'App.model.firstName'
                     }),
    App.Field.create({ label: 'I have a valid work permit for working in India.',
                       valueBinding: 'App.model.validWorkingIndia',
                       typeCheckbox: true});
];

And finally my template view does a switch on this array:

      <fieldset>
        <dl>
          {{#each fields}}
            {{#if typeText}}
              {{view App.FormFieldTextView fieldBinding="this"}}
            {{/if}}
            {{#if typeCheckbox}}
              {{view App.FormFieldCheckboxView fieldBinding="this"}}
            {{/if}}

            ... more types here

          {{/each}}
        </dl>
      </fieldset>

Handlebar templates for the form controls:

  <script type="text/x-handlebars" data-template-name="formfield-text">
    <dt><label>
        {{field.label}}{{#if field.required}}*{{/if}}
    </label></dt>
    <dd>{{view Ember.TextField valueBinding="field.value"}}</dd>
  </script>

  <!-- dd/dt deliberately in the wrong order -->
  <script type="text/x-handlebars" data-template-name="formfield-checkbox">
    <dd class="checkbox">
      {{view Ember.Checkbox valueBinding="field.value"}}
    </dd>
    <dt class="checkbox"><label>{{field.label}}{{#if field.required}}*{{/if}}
        </label></dt>
  </script>