選択した項目をテンプレート値に基づいて選択リストに設定します

Question

テンプレートから現在の値で選択コントロールをどのように事前に設定できますか？

フォームが表示されているときに、選択したレコードの値が事前に入力されているレコードを編集するためのシンプルなフォームがあります。このようなビット：

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

handlebars.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

私はほとんど同じ問題を抱えていましたが、私が渡していた値は数字でした。私は、ハンドバールの魔法に依存せずに、その特定のケースに対してより洗練された解決策を持っていると信じています。テンプレートで

：

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

これは単に私たちが望む値に対応し、この選択フィールドで「n番目」オプションを選択します。

Answer 3

選択した回答はもう機能しません。それは古い質問ですが、私はこの単純なことを理解するのに苦労しました。ここに私のソリューションです：

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

流星の現在のバージョンでは、我々が設定できないHTMLは、値なしで属性、流星は、いずれかの{{#ifのを}}を使用して許可していません。しかしヘルパーに渡されたオブジェクトはkey = valueの組に変換され、注入されます。

UPDATE

利用UI.registerHelperの代わりに、ハンドルネームスペースが減価償却されるので、流星の新しい（> 0.8）のバージョン（https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated）でHandlebars.registerHelper。

Answer 4

この機能を作った。あなたの関数を呼び出す

selectedOptionした後、あなたの場合

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


    } 

に適応（）;

Answer 5

私は（場合には、誰かがそれを必要とする:)

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

おかげ..