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.

I have:

...
<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>

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.

Any ideas?

Thanks for you help.

Stefan

回答1:

{{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') 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.

来源：https://stackoverflow.com/questions/24594947/polymer-get-the-value-of-paper-input-inside-a-paper-dialog-after-paper-button-p

标签

javascript

polymer