handlebars.js…动态 object 支架选择器

Question

I am using handlebars on a particular project, and I need to be able to pick the selected option based on some dynamic values.

<select name="{{attribute_code}}">
    {{#each values}}
        <option value="{{value_index}}"
            {{#ifCond ../../selectedProduct.[some_attribute] '==' value_index}}selected{{/ifCond}}>
            {{label}}
        </option>
    {{/each}}
</select>

The above block is inside an each block which has an attribute_code value. In the option loop for the select, i need to map the value of attribute code to some_attribute . I have dug through the docs and google, and I can't seem to find a solution for this.

So for example let's say attribute_code has a value of flavour

Then I would need the expression in the option to be... {{#ifCond../../selectedProduct.[flavour] '==' value_index}}selected{{/ifCond}}

Thoughts?

Answer 1

I solved this by making a custom helper...

Handlebars.registerHelper('ifDynamicPropertyCond', function (object, property, operator, value, options) {
    switch (operator) {
        case '==':
            return (object[property] == value) ? options.fn(this) : options.inverse(this);
        case '!=':
            return (object[property] != value) ? options.fn(this) : options.inverse(this);
        case '!==':
            return (object[property] !== value) ? options.fn(this) : options.inverse(this);
        case '===':
            return (object[property] === value) ? options.fn(this) : options.inverse(this);
        case '<':
            return (object[property] < value) ? options.fn(this) : options.inverse(this);
        case '<=':
            return (object[property] <= value) ? options.fn(this) : options.inverse(this);
        case '>':
            return (object[property] > value) ? options.fn(this) : options.inverse(this);
        case '>=':
            return (object[property] >= value) ? options.fn(this) : options.inverse(this);
        case '&&':
            return (object[property] && value) ? options.fn(this) : options.inverse(this);
        case '||':
            return (object[property] || value) ? options.fn(this) : options.inverse(this);
        default:
            return options.inverse(this);
    }
});

and then simply...

{{#ifDynamicPropertyCond../../selectedProduct../attribute_code '==' value_index}}selected{{/ifDynamicPropertyCond}}