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对并注入。

更新

在新的（> 0.8）版本的meteor中使用UI.registerHelper代替Handlebars.registerHelper，因为Handlebars名称空间已弃用（https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated）。

Answer 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()

谢谢大家..

Answer 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传递你想要选择的属性的数量。这仅在每个选项具有连续数值的情况下有用。另请注意，如果您将此属性命名为“value”，则默认情况下会覆盖/忽略该属性，从而选择第一个选项。

现在在JS文件中的.rendered回调中：

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

这只是选择此选择字段中的'nth'选项，该选项对应于我们想要的值。

Answer 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（）;

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

5 个答案: