3

Meteor で動作すると思われる方法で HTML Select Options を動作させるのに問題があります。

以下は、Countries というコレクションのボタンでどのように機能するかの例です。

テンプレート

{{#each get_countries}}
  <button class="btn btnCountryTest">{{iso3}} - {{name}} </button><br />
{{/each}}

クライアント イベント ハンドラ

'click .btnCountryTest': function(event){
   console.log('clicked .btnCountryTest this._id: ' + this._id);
}

のような正しい出力を生成します。

clicked .btnCountryTest this._id: 39cd432c-66fa-48de-908b-93a874323e2e

今、私ができるようにしたいのは、HTML の [選択オプション] ドロップダウンからアイテムが選択されたときに、ページ上の他のアクティビティをトリガーすることです。オプションの値にIDを入れてJqueryなどを使用できることはわかっています... Meteorで「うまくいく」と思いましたが、その方法がわかりません。

ここに私がしようとしているものがありますが、うまくいきません。

テンプレート

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}">{{name}}</option>
  {{/each}}
</select>

ハンドラ

'click #country': function (event) { 
  console.log('Template.users_insert.events click .country this._id: ' + this._id);
 }

生産する

Template.users_insert.events click .country this._id: undefined

明らかに私が期待していたものではありません。Jqueryフォーム処理に頼る前に誰かアイデアはありますか?

ありがとうスティーブ

4

5 に答える 5

5

Meteorでは、現在の変数をコンテキストとして扱うeachヘルパー呼び出しMeteor.ui.listChunk(packages/templating/deftemplate.js を参照してください) 。this

つまり、 ではグローバルコンテキストであり、イベントのようにブロック下でclick #countryしかアクセスできません。this._ideachclick #country option

HTMLのデータ属性にデータを入れて、jQueryでアクセスできると思います。ちょうどこのような -

テンプレート

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}" data-id={{_id}}>{{name}}</option>
  {{/each}}
</select>

扱う

'click #country': function (event) { 
  console.log('Template.users_insert.events click .country this._id: ' + $(event.currentTarget).find(':selected').data("id"));
 }
于 2012-08-14T03:32:57.107 に答える
2

@StevenCannon、私は同様の問題を抱えていて、ここで解決策を見つけました - http://www.tutorialspoint.com/meteor/meteor_forms.htm。@DenisBrat は正しいです。クリック イベントではなく変更イベントをリッスンします。

あなたのために修正されたソリューションは次のとおりです。

'change select'(event) {
    // Prevent default browser form submit
    event.preventDefault();

    var selectedCountry = event.target.value;

    console.log('Template.users_insert.events change select iso3: ' + selectedCountry);
}
于 2016-09-13T13:39:52.107 に答える
0

「packages/liveui/liveui.js」も参照してください。コールバックオブジェクトfindEventDataを与える関数があります。this

于 2012-08-14T03:49:40.047 に答える