13

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

我有一个简单的表单来编辑一条记录，其中在显示表单时预先填充了所选记录的值。有点像这样：

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

但是在我使用选择控件的地方，我需要能够查询模板值并有条件地selected='selected'为正确的选项设置属性。

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

handlebars.js 提供了 #IF 帮助器，但这只会给出真假。

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

4

5 回答 5

16

您可以使用助手：

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/

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

于 2012-08-25T18:32:12.563 回答
11

所选答案不再起作用。这是一个老问题，但我很难弄清楚这个简单的事情。这是我的解决方案：

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

在当前版本的流星中，我们不能设置没有值的 HTML 属性，流星也不允许使用 {{#if}}。但是传递给助手的对象被转换成键=值对并注入。

更新

由于 Handlebars 命名空间已被贬低（https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated ），因此在新（> 0.8）版本的流星中使用UI.registerHelper而不是。Handlebars.registerHelper

于 2014-03-15T15:08:59.893 回答
4

我在我的项目中使用了以下内容（以防有人需要它:)

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

谢谢大家。。

于 2015-10-02T14:27:59.797 回答
1

我遇到了几乎相同的问题，但是我传递的值是数字，我相信对于这种特定情况我有一个更清晰的解决方案，即不依赖于 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 文件中的 .rendered 回调中：

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

这只是在此选择字段中选择与我们想要的值相对应的“第 n 个”选项。

于 2013-08-13T13:25:54.257 回答
1

我做了这个功能。适应您的情况

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);
            }
        };


    }

调用你的函数后

选择选项（）；

于 2015-07-27T14:07:17.920 回答