Question

我有一个我通过2个数组的dust.js模板文件：

下拉列表选项的一系列选项
1个选定选项数组

如何选择dust.js下拉列表中的选项？

以下是一个例子：

我发送给模板的数据

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

模板

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

如何使用{selectedValues}选择这些选项？

提前感谢您的帮助。

Answer 1

添加另一个循环以覆盖所选选项

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

请注意，我正在使用来自Linkedin的Dust Helpers来提供相等比较。

Answer 2

另一个使你的dust.js模板更清洁的解决方案是将两个列表组合成一个新的对象列表。

所以使用您之前的数据示例：

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);
}

你的dust.js模板现在看起来像这样：

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

Answer 3

与这个具体问题并不完全相关，但可能对某些人有用。您可以创建一个全局帮助程序来执行此操作：

_.extend dust.helpers,

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

    chunk

我使用了CoffeeScript和Underscore.js，但它很容易翻译成普通的Javascript。

用法：

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

还有一个更广泛的插件，在dustjs-helpers-extra中具有相同的功能。

有关如何create global helpers的更多信息。

如果数组中的值为Dust.js

3 个答案: