Dust.js If Value In Array

I have a dust.js template file to which I pass 2 arrays: 1 array of options for a dropdown multiple select 1 array of selected options How can I select the options in the dropdow

Solution 1:

Add in another loop to go over your selected options

<select multiple>
    {#selectOptions}
        <option
            {#selectedValues val=.}
                {@eq key="{val}" value="{.}"}selected="true"{/eq}
            {/selectedValues}
        >{.}</option>
    {/selectOptions}
</select>

Note that I'm using the Dust Helpers from Linkedin to provide the equality comparison.

Solution 2:

Another solution that would make it cleaner for your dust.js template would be to combine both list into a new list of objects.

So using your previous data example :

var selectOptions = [1,2,3,4,5,6,7,8,9,10,11,12,13];
var selectedValues = [3,7,9];
var options = [];
for(var i=0;i<selectOptions.length;i++){
    var item = selectOptions[i];
    // Option object containing selected value + selected infovar option = { value : item, selected : selectedValues.indexOf(item) > -1 };
    options.push(option);
}

Your dust.js template will now look like this :

<select multiple>
{#options}
    <option {?selected}selected="true"{/selected}>{value}</option>
{/options}
</select>

Solution 3:

Not entirely related to this concrete question, but may be useful to someone. You can create a global helper that does just that:

_.extend dust.helpers,

  contains: (chunk, context, bodies, params) ->
    if _.contains params.array, params.key
      chunk = bodies.block(chunk, context)

    chunk

I used CoffeeScript and Underscore.js but it's easily translatable to plain Javascript.

Usage:

// options = ["foo", "bar"]
{@contains array=options key="bar"}
  Bar is an option.
{/contains}

There is also a plugin, much more extensive, with the same functionality in dustjs-helpers-extra.

More info on how to create global helpers.