Как вы можете правильно заполнить элемент управления с текущим значением из шаблона?
У меня есть простая форма для редактирования записи, где значения для выбранной записи предварительно заполняются, когда отображается форма. Немного похоже на это:
<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, но это дает только правду или фальшивость.
Я мог бы взломать это по-разному, но это похоже на сценарий, где будет стандартное решение.
Вы можете использовать помощника:
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"}
Попробуйте здесь:
Хотя он и не позволяет мне его сохранить. :(
Выбранный ответ больше не работает. Это старый вопрос, но мне было трудно понять эту простую вещь. Здесь мое решение:
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).
В моем проекте я использовал следующее (в случае, если кому-то это нужно:)
<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()
Спасибо вам всем..
У меня была почти идентичная проблема, но значения, которые я передавал, были числами, и я считаю, что у меня есть более чистое решение для этого конкретного случая, то есть без зависимости от манеры 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" в этом поле выбора, который соответствует желаемому значению.
Я сделал эту функцию. Адаптируйте к вашему делу
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();