如何向聚合物自定义元素的子元素添加点击监听器？

Question

我正在尝试将点击侦听器添加到 "created" 生命周期回调中自定义元素内的其中一个按钮（甚至尝试 "ready" 具有相同结果的回调）。

我遇到错误 "button element is undefined/null"。

注：

一个。我不能像这样为整个自定义组件添加点击侦听器。

   listeners: {
        'click': '_onClick'
    },

我只需要给按钮添加一个监听器。如何获得这个简单的东西？对不起，我听起来很天真。

b。由于 CSP 限制，无法执行内联脚本

<paper-button id='saveBtn' on-click="handleClick">
     Save
</paper-button>

错误信息：

Uncaught TypeError: Cannot read property 'addEventListener' of null

Polymer.created @ elements-imports.csp.js:10596Polymer.Base._addFeature._invokeBehavior @ elements-imports.csp.js:267Polymer.Base._addFeature._doBehavior @ elements-imports.csp.js:262Polymer.Base.createdCallback @ elements-imports.csp.js:97Polymer.Base._addFeature.instanceTemplate @ elements-imports.csp.js:535Polymer.Base._addFeature._stampTemplate @ elements-imports.csp.js:531Polymer.Base._addFeature._initFeatures @ elements-imports.csp.js:4627Polymer.attached @ elements-imports.csp.js:5612Polymer.Base._addFeature._invokeBehavior @ elements-imports.csp.js:267Polymer.Base._addFeature._doBehavior @ elements-imports.csp.js:262Polymer.Base.attachedCallback @ elements-imports.csp.js:102Polymer.Base._addFeature.attachedCallback @ elements-imports.csp.js:603Polymer.Base._addFeature._readySelf @ elements-imports.csp.js:591(anonymous function) @ elements-imports.csp.js:5554Polymer.ImportStatus._importsLoaded @ elements-imports.csp.js:5553(anonymous function) @ elements-imports.csp.js:5564checkDone @ webcomponents-lite.js:968watchImportsLoad @ webcomponents-lite.js:990(anonymous function) @ webcomponents-lite.js:939whenDocumentReady @ webcomponents-lite.js:957checkReady @ webcomponents-lite.js:952

自定义元素：

<dom-module id="my-form">
    <template>
        <div>
            <paper-input id="inputName" label="Name" required error-message="Required Input"> Name </paper-input>
            <paper-input id="inputServer" label="Server URL" required error-message="Required Input"> Server </paper-input>
            <paper-input id="inputUsername" label="Username" required error-message="Required Input">Username</paper-input>
            <paper-input id="inputPassword" label="Password" type="password" required error-message="Required Input" value="">Password</paper-input>
            <div class="rows layout horizontal right-justified certificate">
                <paper-button id='cancelBtn' tabindex="0">Cancel</paper-button>
                <paper-button id='saveBtn' tabindex="0">Save</paper-button>
            </div>
        </div>
    </template>
</dom-module>
<script>
Polymer({

    is: 'my-form',

    created: function() {
        var saveBtn = document.querySelector('#saveBtn');
        saveBtn.addEventListener('click', function() {
            document.getElementById('inputName').validate();
            document.getElementById('inputServer').validate();
            document.getElementById('inputUsername').validate();
            document.getElementById('inputPassword').validate();
        });
    },
});

Answer 1

on-click="handleClick"

不是内联代码，它只是一个属性，所以在CSP下工作得很好。

created()

太早了，你的元素还没制作好

ready()

此时您的元素已创建，但它们不一定在 document 中，因此使用 document.querySelector（或 document.getElement*）不是一个好主意。

但是，Polymer 通过 id 作为属性提供模板中的元素映射，称为 $，因此您可以编写 var saveBtn = this.$.saveBtn（但您应该使用 on-click 代替）。

如何向聚合物自定义元素的子元素添加点击监听器？

How to add a click listener to polymer custom element's child?

html

javascript

polymer

polymer-1.0