你怎么能正确地预填充从模板的当前值选择控制?
我有一个简单的表格,编辑记录,其中示出的形式,当用于所选择的记录的值是预填充。 有点像这样:
<input type="text" id="project_name_edit" value="{{selected_name}}">
但是,在我使用的是选择控制,我需要能够interogate模板值并有条件地设置selected='selected'
正确的选项属性。
<select id="project_status_edit" value="{{selected_status}}">
<option>GOOD</option>
<option>BAD</option>
<option>UGLY</option>
</select>
handlesbars.js提供#IF帮手,但这只是给truthy或falsy。
我大概可以破解这种以各种方式,但是这似乎是一个场景,其中会有一个标准的解决方案。
你可以使用一个帮手:
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/
虽然它似乎没有让我保存它。 :(
所选答案不工作了。 这是一个老问题,但我的日子不好过了弄清这简单的一件事。 这里是我的解决方案:
Handlebars.registerHelper('selected', function(key, value){
return key == value? {selected:'selected'}: '';
});
在流星的当前版本中,我们不能设置没有价值的HTML属性和流星不允许使用{{#如果}}无论是。 但传递给助手对象被转换成键值对,并注射。
UPDATE
使用UI.registerHelper
代替Handlebars.registerHelper
在新的(> 0.8),因为把手命名空间折旧流星的版本( 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()
谢谢大家..
我几乎一个相同的问题,但我值路过了号码,我相信我有该特定情况下,清洁的解决方案,那就是不依赖于把手魔术。
在模板:
<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文件的.rendered回调:
Template.templateName.rendered = () ->
var btn_style = $('#button-style').attr('_val')
$('#button-style option:nth-child(' + btn_style + ')').attr('selected', 'selected')
这只是选择在对应于我们想要的值这个选择字段的“第n”选项。
我做了这个功能。 适应你的情况
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();