Dust.js if value in array

Question

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 dropdown in dust.js?

Here is an example:

The data I send to the template

var selectOptions = [1,2,3,4,5,6,7,8,9,10,11,12,13];
var selectedValues = [3,7,9];

The template

<select multiple>
    {#selectOptions}
        <option>{.}</option>
    {/selectOptions}
</select>

How can I use the {selectedValues} to select those options?

Thanks in advance for your help.

Simon · Answer 1 · 2013-10-21T01:53:48.473

6

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.

edited Oct 21 '13 at 01:53

answered Oct 10 '13 at 07:57

Simon

1,756
12
8

Sounds like a good solution, going to try it out now. Can't believe it didn't come to me before :) – denislexic Oct 10 '13 at 09:40
humm...doesn't seem to be working. The double nesting is giving me the same value. ie {val} and {.} are the exact same. Any ideas? – denislexic Oct 20 '13 at 21:09
My bad, you don't need the curly braces in the inline parameter declaration. I've edited the template. So instead of `val={.}` just use `val=.` – Simon Oct 21 '13 at 01:54

score 3 · Accepted Answer · answered Oct 28 '13 at 05:58

3

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 info
    var 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>

answered Oct 28 '13 at 05:58

Guillaume Acard

399
3
4

That's more or less what I ended up doing, but isn't there a dust way of doing this instead of modifying my object? – denislexic Oct 28 '13 at 07:47
1

Modifying your object makes it cleaner in dust.js else you need to do like Simon proposed but it also means iterating on the list for every item. Dust.js is a templating engine that favor minimum code "tricks" inside the template therefore JS code is to be favored in this case. – Guillaume Acard Oct 28 '13 at 10:12

score 0 · Answer 3 · answered Aug 25 '15 at 15:44

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.

Dust.js if value in array

3 Answers3

Linked