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

每个事件处理程序都有两个参数：事件和模板。您可以在此处阅读有关这些事件处理程序参数的更多信息：http: //docs.meteor.com/#eventmaps

event.target是对发起事件的 DOM 元素的引用。然后，您可以使用类似 jQuery 的遍历函数来获取附近的元素。

您还可以将输入值设置为模板实例的属性。例如，在模板的created处理程序中，您创建 name 和 score 属性：

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

然后在输入文本框的 keyup 事件中更新这些值：

'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 回答
1

很高兴看到有这么多街头信誉的人使用 Meteor！获取值的最佳方法是使用event.currentTarget并从数据上下文中获取内容还有另一种不需要 DOM 知识的方法

Template.player.events({
    'keypress #name':function(event,context) {
        //Get the event sending this' value
        console.log(event.currentTarget.value)

        //Traverse the DOM on the template 'player' in this case
        console.log(context.find('#score').value)
     }
});

基本上，获取 sender 值的最佳方法是使用event.currentTarget发送事件的对象访问 DOM。

以这种方式实现的原因可能是因为任何 dom 对象都可以发送事件，并且它不一定总是有一个value字段，因此在处理事件映射时需要对 DOM 有一点了解，但使用event.currentTarget.value适用于大多数表单字段

数据上下文

关于数据上下文，您应该能够使用来自帮助程序的模板中可用的数据，例如，如果模板或帮助程序中有一个{{score}}&{{name}}值，在这种情况下通过{{#each}}每个单独的播放器传递。

 this.name,
 this.score;

这也与（我通常context在我的助手中使用，但template我猜想在 travellingprog 的答案中是另一种调用方式）

 context.data.name,
 context.data.score;

这this有助于将数据从模板的数据上下文中获取到事件中，这样就不必使用包含数据的隐藏 HTML 属性，例如，如何删除播放器比将_iddom 存储在某处更干净。话虽这么说event.currentTarget，还是context.find(..)从文本字段中获取数据的最佳方式。

于 2013-04-02T07:11:58.737 回答