handlebars.js - 在 Handlebars 中设置选择元素的选定值

我有一个嵌入在html页面中的 Handlebars 模板。有一个select元素，其中所有可用选项都已呈现。渲染模板时如何设置选择列表的选择值？

<script id="my-template" type="text/x-handlebars-template">
    <div id="my-modal">
      <form action="/TestAction" method="post">
        <input id="MyId" name="MyId" type="hidden" value="{{MyId}}" />
        <label for="Test">Test: (optional)</label>
        <select id="Test" name="Test">
          <option value="">-- Choose Test --</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </form>
    </div>
</script>

最佳答案

如果您不想将选项扩展为帮助程序的一部分，则可以使用小型自定义 Handlebars 帮助程序和父上下文的组合，使用../语法表示:

首先编写助手:

Handlebars.registerHelper('selected', function(option, value){
    if (option === value) {
        return ' selected';
    } else {
        return ''
    }
});

然后在模板中调用助手，并在each循环内传递父上下文，以检查selectedState

{{#each states}}
    <option value="{{this}}" {{selected this ../selectedState}}>{{this}}</option>
{{/each}}

关于handlebars.js - 在 Handlebars 中设置选择元素的选定值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9917705/