Question

我正在使用Reactive-Table来显示我的Meteor应用程序中保存的数据，如下面的代码所示，在表格的每一行中都有一个链接来编辑与此行相关的文档。我正在尝试使用编辑链接＆＃39;点击事件＆＃39;捕获与正在选择的行相关的文档的_id，但似乎无法获取_id，有人可以检查我的代码并让我知道我在这里缺少什么/做错了以及如何捕获_id？感谢

customerslist.html

<template name="customerslist">
  <div class="customerslist">
    <div class="page-header">
      <h1>Customers List</h1>
    </div>

    <div>
      {{> reactiveTable class="table table-bordered table-hover" collection=customersCollection settings=settings}}
    </div>
  </div>
</template>

customerslist.js

Template.customerslist.helpers({
    customersCollection: function () {
        return Customers.find({},{sort: {title: 1}});
    },
    settings: function () {
        return {
            rowsPerPage: 10,
            showFilter: true,
            showColumnToggles: false,
            fields: [
          { key: 'name', label: 'Customer Name' },
          { key: 'email', label: 'Email' },          
          { key: 'phone', label: 'Phone' },
          { key: '_id', label: 'Action', sortByValue: false, fn: function(_id){ return new Spacebars.SafeString('<a name="' + _id +'" class="edtlnk" target="_blank" href="' + _id + '/edit"> Edit </a>'); }  }
      ]
        };
    }
});

Template.customerslist.customers = function () {
    return Customers.find({},{sort: {title: 1}});
};

Template.customerslist.events({    
   'click .edtlnk': function(e) {
      var cust = this;
      event.preventDefault();
      console.log('Customer ID: '+cust._id);    
   }          
});

Answer 1

包设置数据上下文的方式，如果事件选择器与tr元素匹配，this将仅设置为客户对象。这使得event.currentTarget成为tr，但event.target仍然是编辑链接。

您可以尝试这样的事情：

Template.customerslist.events({    
   'click .customerslist tr': function(e) {
        if ($(e.target).hasClass('edtlnk')) {
            var cust = this;
            e.preventDefault();
            console.log('Customer ID: '+cust._id);  
        }
   }          
});

Answer 2

我不知道Meteor，虽然我开始玩它，所以我根本不关心投票，而是关心你的问题。

我发现了事件地图文档，我相信你也看到了： https://docs.meteor.com/#/full/eventmaps

这是在doc：

中列出的

{
  'click p': function (event) {
    var paragraph = event.currentTarget; // always a P
    var clickedElement = event.target; // could be the P or a child element
  }
}

如果选择器匹配事件冒泡的多个元素，则会多次调用它，例如在“click”的情况下 div'或'click *'。如果没有给出选择器，则只在原始目标元素上调用一次处理程序。

传递给处理程序的事件对象可以使用以下属性和方法：

输入字符串事件的类型，例如“click”，“blur”或“keypress”。

目标DOM元素 发起事件的元素。

currentTarget DOM元素 当前处理事件的元素。这是与事件映射中的选择器匹配的元素。对于冒泡的事件，它可能是目标的目标或祖先，其值随着事件的冒泡而变化。

在我看来，既然target和currentTarget是DOM元素，你不能从那些中得到你需要的东西，或者你是指在插入回调中Meteor中可用的_id？

流星从反应表中检索文档_id

2 个答案: