是否有获取聚合物元素的数据集或属性的常用方法? [英] Is there a common way to get a polymer element's dataset or attributes?

问题描述

我在自己的聚合物元素中使用了纸张输入"和纸张按钮"，因为e.target不是绑定数据集和属性的元素，因此在事件处理程序中获取数据集的方式有所不同.是否有获取聚合物元素的数据集或属性的常用方法?

I used "paper-input" and "paper-button" in my own polymer element, since the e.target is not the element which bind the dataset and attributes, the way to get dataset in event handler is different. Is there a common way to get a polymer element's dataset or attributes?

<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>

推荐答案

您的绑定似乎有点不正确.

It looks like your binding is slightly incorrect.

要绑定data-属性并能够使用dataset属性访问它，请使用data-foo$=value $= -project.org/1.0/docs/devguide/data-binding.html#native-binding"rel =" nofollow> [*] .否则，Polymer将属性转换为元素上的camelCase属性(即data-foo=将由element.dataFoo访问，而data-foo$=将是element.dataset.foo). 在您的示例中，Polymer在<paper-input>上创建了dataElmid属性，在<paper-button>上创建了dataHello.

To bind a data- attribute and be able to access it with the dataset property, use $= in data-foo$=value [*]. Otherwise, Polymer converts the attribute into a camelCase property on the element (i.e., data-foo= would be accessed by element.dataFoo, whereas data-foo$= would be element.dataset.foo). In your example, Polymer created a dataElmid property on <paper-input>, and dataHello on <paper-button>.

这是更正的示例:

<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>

这篇关于是否有获取聚合物元素的数据集或属性的常用方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！