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>

handlesbars.js は #IF ヘルパーを提供しますが、これは true または false のみを提供します。

おそらくこれをさまざまな方法でハッキングできますが、これは標準的な解決策があるシナリオのようです。

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

現在のバージョンの meteor では、値なしで HTML 属性を設定することはできません。また、meteor では {{#if}} の使用も許可されていません。ただし、ヘルパーに渡されたオブジェクトはキー=値のペアに変換されて挿入されます。

アップデート

Handlebars 名前空間が廃止されたため、新しい (> 0.8) バージョンの meteorUI.registerHelperでは代わりに使用してください ( https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated )。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

この機能を作りました。あなたのケースに適応する

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

于 2015-07-27T14:07:17.920 に答える