在on-tap事件中获取paper-checkbox的数据属性

时间:2016-09-08 21:09:47

标签: javascript polymer

<paper-checkbox data-id$="{{id}}" on-tap="done" checked="[[isDone]]">Done</paper-checkbox>

请注意paper-checkbox

中不包含<template is="dom-repeat" ...>

如何在data-id方法中获取done(e)的值?

我预计它适用于:

e.target.dataset.id

但它没有...如何获取该值?

1 个答案:

答案 0 :(得分:1)

这比我预期的更有趣:)。

访问data-x属性没有特殊约定,例如您尝试过的dataset.x。要获得该值,您需要使用标准getAttribute()方法。

奇怪的是,要访问属性,您需要从事件目标的父节点<paper-checkbox>获取它。目标是里面的div。

Polymer({
  is: 'my-elem',
  tapped: function(e) {
    console.log(e.target.parentNode.getAttribute('data-id'));
  }
});
<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>
  <link href="paper-checkbox/paper-checkbox.html" rel="import" />
</head>

<body>
  <my-elem></my-elem>
  
  <dom-module id="my-elem">
    <template>
      <paper-checkbox data-id="x" on-tap="tapped"></paper-checkbox>      
    </template>
  </dom-module>

</body>
</html>