Polymère: récupérer la valeur de l'entrée papier dans un dialogue papier après avoir appuyé sur le bouton papier "ok"

Question

J'ai besoin d'obtenir la valeur de certains champs de saisie papier dans un dialogue papier après un appui sur un "ok" bouton de papier.

J'ai:

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

J'ai essayé plusieurs façons de trouver les valeurs des champs papier entrée mais pas trouvé un moyen de Propper de le faire. e.target.templateInstance ne fonctionne pas. Un appel à document.querySelector('#dialog-add-note-header') donne un résultat nul.

Des idées?

Merci pour votre aide.

Stefan

Answer 1

{{valHeader}} crée une propriété dans votre liste note elelemt qui est lié à la valeur d'entrée du papier entrée .

Vous pouvez y accéder avec

var header = this.valHeader 

document.querySelector('#dialog-add-note-header') ne fonctionne pas, parce que l'élément papier entrée est dans le DOM d'ombre du paper-dialog. Mais vous pouvez utiliser l'utilitaire de recherche de nœuds de Polymer this.$.dialogAddNoteHeader (renommez votre attribut id pour qu'il ne contienne aucun tiret) pour accéder directement à l'élément d'entrée.