0

私は今リーダーボードの例を見ていて、それを終えましたが、追加機能の実装に完全には満足していません.

まず、

Template.player.events({
    'click': function () { 
        Session.set("selected_player", this._id);
    }   
});

thisがプレーヤー コレクションにどのように関連付けられているかは少しわかりにくいと思いますが、これは<templateパーツに関係していると思います。私もできる

Template.leaderboard.events({
    'click input.delete': function () {
        Players.remove(this._id);
    }

...関連付けられたボタンエントリを持つプレーヤーを削除します。

実際の質問部分について: これをリーダーボード テンプレートの下部に追加しました。

<div>
    Add player: (Name <input required name="name" id="name">)
    (Score <input required name="score" id="score">)
    <input class="add" type="button" value="Add">
</div>

これは正常に動作し、正常に動作してTemplate.leaderboard.events['click input.delete']いますが、使用する値を取得するには:

'click input.add': function () {
    var name = document.getElementById('name').value,
        score = document.getElementById('score').value;

this何らかの方法で使用できたり、イベントを使用して何らかの方法で入力に対応する値を取得したりできれば、それは私にとって非常に理にかなっています。これは、デザインの観点から理にかなっているだけでなく、これらの種類のフォームが複数同時に表示されている場合にも対応できます。

つまり、イベントのコンテキストでターゲット要素の近くにある要素を取得する方法はありますか?

4

2 に答える 2

1

すべてのイベント ハンドラーには、 eventとtemplateの 2 つの引数が与えられます。これらのイベント ハンドラの引数について詳しくは、http: //docs.meteor.com/#eventmapsをご覧ください。

event.targetは、イベントを発生させた DOM 要素への参照です。次に、jQuery のトラバース関数のようなものを使用して、近くの要素を取得できます。

入力値をテンプレート インスタンスのプロパティとして設定することもできます。たとえば、テンプレートの作成されたハンドラーで、名前とスコアのプロパティを作成します。

Template.player.created = function() {
  this.name = '';
  this.score = '';
};

次に、入力テキスト ボックスのキーアップ イベントでこれらの値を更新します。

'keyup #name': function(event, template) {
  template.name = event.target.value;
},

'keyup #score': function(event, template) {
  template.score = event.target.value;
}

これは、ここで説明されているように、Ember 用に作成されたウィジェットが値を更新するのと同じ方法です: http://www.emberist.com/2012/04/12/two-way-binding-to-the-dom.html

于 2013-04-02T03:22:12.560 に答える