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 · Accepted Answer · 2013-10-21 01:53:48Z

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, 2013 at 1:53

answered Oct 10, 2013 at 7:57

Simon

1,75512 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

denislexic Over a year ago

Sounds like a good solution, going to try it out now. Can't believe it didn't come to me before :)

denislexic Over a year ago

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?

Simon Over a year ago

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=.

Guillaume Acard · Accepted Answer · 2013-10-28 05:58:02Z

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, 2013 at 5:58

Guillaume Acard

4194 silver badges4 bronze badges

2 Comments

denislexic Over a year ago

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?

Guillaume Acard Over a year ago

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.

Naoise Golden · Accepted Answer · 2015-08-25 15:44:54Z

0

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.

answered Aug 25, 2015 at 15:44

Naoise Golden

8,9314 gold badges52 silver badges66 bronze badges

Collectives™ on Stack Overflow

Dust.js if value in array

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related