Установите выделенный элемент в списке выбора на основе значения шаблона

Как вы можете правильно заполнить элемент управления с текущим значением из шаблона?

У меня есть простая форма для редактирования записи, где значения для выбранной записи предварительно заполняются, когда отображается форма. Немного похоже на это:

<input type="text" id="project_name_edit" value="{{selected_name}}">

Но когда я использую элемент управления select, мне нужно иметь возможность взаимодействовать с значением шаблона и условно устанавливать свойство selected='selected' для правильной опции.

<select id="project_status_edit" value="{{selected_status}}">
      <option>GOOD</option>
      <option>BAD</option>
      <option>UGLY</option>
</select>

handlesbars.js предлагает помощник #IF, но это дает только правду или фальшивость.

Я мог бы взломать это по-разному, но это похоже на сценарий, где будет стандартное решение.

Ответ 1

Вы можете использовать помощника:

Handlebars.registerHelper('selected', function(foo, bar) {
  return foo == bar ? ' selected' : '';
});

с которой вы можете позвонить:

<select id="project_status_edit">
  <option{{selected foo "GOOD"}}>GOOD</option>
  <option{{selected foo "BAD"}}>BAD</option>
  <option{{selected foo "UGLY"}}>UGLY</option>
</select>

Использование:

{"foo":"UGLY"}

Попробуйте здесь:

http://tryhandlebarsjs.com/

Хотя он и не позволяет мне его сохранить. :(

Ответ 2

Выбранный ответ больше не работает. Это старый вопрос, но мне было трудно понять эту простую вещь. Здесь мое решение:

Handlebars.registerHelper('selected', function(key, value){
       return key == value? {selected:'selected'}: '';
});

В настоящей версии метеора мы не можем устанавливать атрибуты HTML без значения, а метеорит не позволяет использовать {{#if}}. Но объекты, переданные помощнику, преобразуются в пары ключ = значение и вводятся.

ОБНОВЛЕНИЕ

Используйте UI.registerHelper вместо Handlebars.registerHelper в новых ( > 0.8) версиях метеора, поскольку пространство имен Handlebars обесценивается (https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated).

Ответ 3

В моем проекте я использовал следующее (в случае, если кому-то это нужно:)

  <select class="form-control" id="maritalStatusList" >
      <option {{selectedMaritalStatus  "Single"}}> Single</option>
      <option {{selectedMaritalStatus  "Married"}}> Married</option>
  </select>

Template.editApplicant.helpers({
   selectedMaritalStatus: function(key){
      return key == this.maritalStatus ? 'selected' : '';
   }
});

"this.maritalStatus" получает Семейный статус из текущего документа (Заявитель).

Используйте следующий код, чтобы сохранить значение в базе данных

maritalStatus: $('#maritalStatusList').val()

Спасибо вам всем..

Ответ 4

У меня была почти идентичная проблема, но значения, которые я передавал, были числами, и я считаю, что у меня есть более чистое решение для этого конкретного случая, то есть без зависимости от манеры Handlebars.

В шаблоне:

<select name="button-style" id="button-style" _val="{{button_style}}">
    <option value="1">Primary Style</option>
    <option value="2">Secondary Style</option>
</select>

вы в основном передаете номер атрибута, который вы хотите выбрать с помощью _val. Это полезно только в случае, когда каждая опция имеет последовательное числовое значение. Также обратите внимание, если вы назовете этот атрибут "значение", он будет перезаписан/проигнорирован по умолчанию, который выбирает первый вариант.

Теперь в запрошенном обратном вызове в вашем JS файле:

Template.templateName.rendered = () ->
    var btn_style = $('#button-style').attr('_val')
    $('#button-style option:nth-child(' + btn_style + ')').attr('selected', 'selected')

Это просто выбирает параметр "nth" в этом поле выбора, который соответствует желаемому значению.

Ответ 5

Я сделал эту функцию. Адаптируйте к вашему делу

selectedOption=function(){
        selectedOpt=document.getElementById("yourTagId_Select");
        var att = document.createAttribute("selected");
        att.value = "selected";
        idObj=Session.get("idObj");
        var lib = yourCollection.find({'column._id':idObj}).fetch();      
        for (var i = 0; i < selectedOpt.length; i++) {
             if (selectedOpt[i].value==lib._id._str){               
                return selectedOpt[i].setAttributeNode(att);
            }
        };


    }

После вызова вашей функции

selectedOption();