在把手中设置选择元素的选定值

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

这里是一个解决方案（内置在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 2

我把{{#each}}助手为灵感，写了一个自定义的助手，做同样的事情：遍历一个列表，并不断追加的参数的内容输出串。 （从这里：Handlebars block helpers）

在这种情况下，我没有通过一块模板HTML作为函数的options参数，就像您在使用{{#each}}时一样。相反，我只是通过强力建立<option> 标签，并测试context列表的每个迭代。最后，我返回​​3210标签大长串，并希望其中一人有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

我有同样的问题。

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

这就是我解决它的方法，我在渲染模板后用jQuery设置了所需的值。令人惊讶的容易。 （也许它也有办法让模板logicless）

Answer 4

如果你不想打造出来的选项作为助手的一部分，你可以使用一个小的自定义车把帮手和家长方面的组合，使用表示在../语法：

先写帮手：

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 5

您可以直像这样的把手模板中使用的值。

把手模板

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