Conditional particles of handles

Question

I have the following data that I am trying to pass to the 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 of which templates "selects" form elements, and the other - "radio" templates. I can’t know what type of form element will be in the data, so I need some kind of helper who checks if type == is selected and whether the corresponding element is used for selection. I'm having trouble creating such an assistant.

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

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 // eg {{#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 built something like this:

 // 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 a field. The trick is the typeXXX fields that I use to determine what to do.

 // 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 makes a switch in 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> 

Handle templates for 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>