Question

我有一个嵌入我的html页面的把手模板。有一个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>

Answer 1

如果您不希望将该选项构建为帮助程序的一部分，则可以使用小型自定义句柄助手和父上下文的组合，使用../语法表示：

首先写下帮助者：

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

Answer 2

我以{{#each}}帮助器为灵感，并编写了一个自定义帮助程序，它执行相同的操作：循环遍历列表，并不断将参数的内容附加到输出字符串。（从这里：Handlebars block helpers）

在这种情况下，我不会传递一大块模板HTML作为函数的options参数，就像使用{{#each}}时一样。相反，我只是建立<option> 标签由暴力破解，并测试context列表的每次迭代。最后，我返回了一大串<option></option>个标签，希望其中一个标签selected="selected"。

功能：

Handlebars.registerHelper('options_selected', function(context, test) {
    var ret = '';
    for (var i = 0, len = context.length; i < len; i++) {
        var option = '<option value="' + context[i]+'"';
        if (test.toLowerCase() == context[i].toLowerCase()) {
            option += ' selected="selected"';
        }
        option += '>'+ Handlebars.Utils.escapeExpression(context[i]) + '</option>';
        ret += option;
    }

    return new Handlebars.SafeString(ret);
});

正在使用的标签：

<script id="form-state" type="text/x-handlebars-template">
    <select name="state">
    {{{options_selected states selectedState}}}
    </select>
</script>

请建议任何可以改善此功能的修改，谢谢！

Answer 3

您可以直接在Handlebars模板中使用值。

把手模板

<select id="distance">
        <option value="15" {{#if (isEqual 15 distance)}} selected {{/if}}>15</option>
        <option value="25" {{#if (isEqual 25 distance)}} selected {{/if}}>25</option>
        <option value="50" {{#if (isEqual 50 distance)}} selected {{/if}}>50</option>
        <option value="100" {{#if (isEqual 100 distance)}} selected {{/if}}>100</option>
        <option value="300" {{#if (isEqual 300 distance)}} selected {{/if}}>300</option>
</select>

把手助手

define(['hbs/handlebars'], function (Handlebars) {
  'use strict';

  Handlebars.registerHelper('isEqual', function (expectedValue, value) {
    return value === expectedValue;
  });
});

Answer 4

这是一个解决方案（构建在EmberJS上以简化JS部分）

我稍微重构了你的样本，以获得建议值的对象，这可以带有selected属性......

模板部分：

<script type="text/x-handlebars" data-template-name="my-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>
          {{#each values}}
              <option {{bindAttr value="id" selected="selected"}}>{{label}}</option>
          {{/each}}
        </select>
      </form>
    </div>
</script>

JS部分：

App.MyView = Ember.View.extend
    templateName: 'my-template'

    MyId: 42
    values: [{
        id: 1,
        label: '1'
    }, {
        id: 2,
        label: '2'
    }, {
        id: 3,
        label: '3',
        selected: true
    }, {
        id: 4,
        label: '4'
    }]

你可以试试@ http://jsfiddle.net/MikeAski/uRUc3/

Answer 5

我有同样的问题。

$('select').val(value);

这就是我解决它的方法，我在渲染模板后用jQuery设置了所需的值。简直太容易了。（也许它也是一种保持模板无逻辑的方法）

在Handlebars中设置Select元素的选定值

5 个答案: