Polymer: получает значение paper -input в диалоговом окне paper после нажатия кнопки paper «ok»

#javascript #polymer

#javascript #polymer

Вопрос:

мне нужно получить значение некоторых полей paper-input внутри paper-dialog после нажатия кнопки paper «ok».

У меня есть:

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

Я перепробовал несколько способов найти значения полей paper-input, но не нашел подходящего способа сделать это. e.target.templateInstance не работает. Вызов document.querySelector('#dialog-add-note-header') приводит к нулевому значению.

Есть идеи?

Спасибо за помощь.

Стефан

Ответ №1:

{{valHeader}} создает свойство внутри вашего элемента elelemt в списке заметок, которое привязано к входному значению элемента paper-input.

Вы можете получить к нему доступ с помощью

 var header = this.valHeader
  

document.querySelector('#dialog-add-note-header') не работает, потому что элемент paper-input находится внутри теневого DOM paper-dialog . Но вы можете использовать утилиту поиска узлов Polymer this.$.dialogAddNoteHeader (переименуйте свой атрибут id, чтобы он не содержал тире) для прямого доступа к элементу ввода.

Комментарии:

1. Спасибо, Дирк! this.$.dialogAddNoteHeader работает просто великолепно!