javascript - 如何访问 polymer 网络组件中的输入元素

Question

我已经成功使用 Polymer 设置了一个简单的注册表单:

<polymer-element name="app-registration">

    <template>
        <style>
            ...
        </style>
        <section>
            <paper-input class="username" .... ></paper-input>
            <paper-input class="password" .... ></paper-input>
            <paper-button label="Submit" on-tap="{{handleSubmit}}"></paper-button>
        </section>
    </template>

    <script>
        Polymer({
            handleSubmit: function (event, detail, sender) {
                alert(this.querySelector('.username').value);
            }
        });
    </script>

</polymer-element>

它工作正常，但是，在 handleSubmit 回调中我无法查询其他输入字段的值。无论我查询 paper-input 或通过类名查询，我都会收到 null。有什么建议如何做到这一点吗？

Answer 1

这些元素位于您的影子 dom 中，因此您需要 this.shadowRoot。 this.querySelector() 将为您提供轻量级 dom 节点。

this.shadowRoot.querySelector('.username').value

更好的是，添加一个 id:

<section id="container">
  <paper-input class="username" .... ></paper-input>
  ...
</section>

并使用节点查找:this.$.container.querySelector('.username').value。