ポリマー要素のデータセットまたは属性を取得する一般的な方法はありますか？

Question

e.targetはデータセットと属性をバインドする要素ではないため、自分自身のポリマー要素に "paper-input"と "paper-button"を使用しました。イベントハンドラでデータセットを取得する方法が異なります。ポリマー要素のデータセットまたは属性を取得する一般的な方法はありますか？

<dom-module id="login-form"> 
<template> 
    <div> 
     <form action="/login" method="POST"> 
      <paper-input id="username" > 
       <paper-icon-button on-click="clearInput" data-elmid="username" suffix > 
       </paper-icon-button> 
      </paper-input> 

      <paper-button class="custom indigo" data-hello="world" on-click="loginValidate"> 
       Login 
      </paper-button> 
     </form> 

    </div> 
</template> 

<script> 
    (function() { 
     Polymer({ 
      is: 'login-form', 
      clearInput: function(e) { 
       console.log(e.target.dataHost.dataset.elmid); 
      }, 
      loginValidate: function(e) { 
       console.log(e.target.dataset.hello); 
      } 
     }); 
    })(); 
</script> 
</dom-module> 

Answer 1

あなたのバインディングが多少間違っているようです。

data-属性を結合して、dataset財産でそれにアクセスすることができ、data-foo$=value[*]に$=を使用するには。そうでない場合、Polymerはその属性を要素のcamelCaseプロパティに変換します（つまりdata-foo=はelement.dataFooでアクセスされますが、data-foo$=はelement.dataset.fooとなります）。 あなたの例では、<paper-input>にdataElmidプロパティを、<paper-button>にdataHelloというプロパティを作成しました。ここで

が修正例を示します

<paper-input id="username"> 
    <!-- change `data-elmid="username"` to `data-elmid$="username"` --> 
    <paper-icon-button on-click="clearInput" data-elmid$="username" suffix > 
    </paper-icon-button> 
</paper-input> 

<!-- change `data-hello="world"` to `data-hello$="world"` --> 
<paper-button class="custom indigo" data-hello$="world" on-click="loginValidate"> 
    Login 
</paper-button>