Установка выбранного значения элемента Select в Handlebars

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. Наконец, я возвращаю большую длинную цепочку из <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

У меня была такая же проблема.

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

Так я решил это, я установил желаемое значение с помощью jQuery после визуализации шаблона. Было удивительно легко. (Возможно, это также способ сохранить без шаблонов шаблоны)

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

Вы можете использовать значения прямо в шаблоне 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> 

Рули Helper

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

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