Question

我用过＆＃34;纸张输入＆＃34;和＆＃34;纸张按钮＆＃34;在我自己的聚合物元素中，由于e.target不是绑定数据集和属性的元素，因此在事件处理程序中获取数据集的方式是不同的。是否有一种获取聚合物元素数据集或属性的常用方法？

<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属性进行访问，请在$= {{3}中使用 data-foo$=value }。否则，Polymer将该属性转换为元素上的camelCase属性（即data-foo=将由element.dataFoo访问，而data-foo$=将为element.dataset.foo。在您的示例中，Polymer在dataElmid上创建了<paper-input>属性，在dataHello上创建了<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>

是否有一种获取聚合物元素数据集或属性的常用方法？

1 个答案: