根据模板值在选择列表中设置所选项目

Question

如何使用模板中的当前值正确预填充选择控件？

我有一个简单的表单来编辑一个记录,在显示表单时预先填充所选记录的值.有点像这样:

<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帮助器,但这只提供了真或假.

我可能会以各种方式破解它,但这似乎是一个标准解决方案的场景.

Answer 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/

虽然它似乎没有让我保存它. :(

Answer 2

所选答案不再有效.这是一个老问题,但我很难搞清楚这个简单的事情.这是我的解决方案:

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

在当前版本的meteor中,我们无法设置没有值的HTML属性,并且meteor也不允许使用{{#if}}.但传递给帮助器的对象将转换为key = value对并​​注入.

UPDATE

因为Handlebars名称空间被折旧(https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated),所以请使用UI.registerHelper而不是Handlebars.registerHelper新的(> 0.8)版本的meteor .