javascript - Dust.js 如果数组中的值

Question

我有一个dust.js 模板文件，我向其中传递了2 个数组：

• 1个下拉多选选项数组
• 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中还有一个更广泛的插件，具有相同的功能。

有关如何创建全局助手的更多信息。