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

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}}帮助器作为灵感,并编写了一个自定义帮助程序,它执行相同的操作:循环遍历列表,并不断将参数的内容附加到输出字符串.(从这里:把手挡住帮手)

在这种情况下,我不会传递一大块模板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

这是一个解决方案（基于 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/