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

У меня есть шаблон handlebars, который я внедряю на моей странице 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>

Ответы

Ответ 1

Если вы не хотите выделять этот параметр как часть помощника, вы можете использовать комбинацию небольшого настраиваемого помощника 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}}

Ответ 2

Я взял вспомогательный {{#each}} в качестве вдохновения и написал собственный помощник, который делает то же самое: перебирает список и постоянно добавляет содержимое аргументов к выходной строке. (Отсюда: Помощники блока Handelbars)

В этом случае я не передаю фрагмент 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>

Пожалуйста, предложите любые изменения, которые улучшат это, спасибо!

Ответ 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/

Ответ 4

Вы можете использовать значения прямо в шаблоне Handlebars так.

Шаблон 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>

Помощник Handlebars

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

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

Ответ 5

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

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

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