聚合物：在纸张按钮按下“确定”后，在纸张对话框中获取纸张输入的值

Question

按下“确定”纸质按钮后，我需要在纸质对话框中获取一些纸质输入字段的值。

我有：

...
<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') 的调用会产生空值。

有什么想法吗？

感谢您的帮助。

斯蒂芬

Answer 1

{{valHeader}} 在您的 note-list elelemt 中创建一个属性，该属性绑定到 paper-input 的输入值。

您可以使用它访问它

var header = this.valHeader

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