聚合物:在纸张按钮按下“确定"按钮后，获取纸张对话框中纸张输入的值. [英] Polymer: get the value of paper-input inside a paper-dialog after paper-button press "ok"

问题描述

在按下确定"的纸张按钮后，我需要获取纸张对话框中某些纸张输入字段的值.

i need to get the value of some paper-input fields inside a paper-dialog after a press on a "ok" paper-button.

我有:

...
<paper-dialog id="notediag" heading="Add Note" transition="paper-dialog-transition-center">
    <paper-input id="dialog-add-note-header" label="Header"
        value="{{valHeader}}"></paper-input>
    <br>
    <paper-input id="dialog-add-note-text" label="Text"></paper-input>

    <paper-button label="Cancel" dismissive></paper-button>
    <paper-button label="Ok" affirmative default
        on-click="{{addNote}}"></paper-button>
</paper-dialog>
...

<script>
Polymer('note-list',{
  addNote: function(e, detail, sender)
  {
        var header=???
        console.log("add note "+header);
  }
});
</script>

我尝试了多种方法来查找纸张输入字段的值，但没有找到正确的方法来执行此操作. e.target.templateInstance不起作用.调用document.querySelector('#dialog-add-note-header')会导致返回空值.

I tried multiple ways to find the values of the paper-input fields but not found a propper way to do it. e.target.templateInstance does not work. A call to document.querySelector('#dialog-add-note-header') results in a null.

有什么想法吗?

感谢您的帮助.

Stefan

推荐答案

{{valHeader}}在您的 note-list 元素中创建一个属性，该属性绑定到纸张的输入值-输入.

{{valHeader}} creates a property inside your note-list elelemt which is bound to the input value of the paper-input.

您可以通过以下方式访问它

You can access it with

var header = this.valHeader

document.querySelector('#dialog-add-note-header')不起作用，因为 paper-input 元素位于paper-dialog的影子DOM内.但是，您可以使用Polymer的节点查找实用程序this.$.dialogAddNoteHeader(将id属性重命名为不包含破折号)直接访问输入元素.

document.querySelector('#dialog-add-note-header') doesn't work, because the paper-input element is inside the shadow DOM of the paper-dialog. But you can use Polymer's node finding utility this.$.dialogAddNoteHeader (rename your id attribute to contain no dashes) to access the input element directly.

这篇关于聚合物:在纸张按钮按下“确定"按钮后，获取纸张对话框中纸张输入的值.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！