Полимерный компонент не зависит друг от друга?

Question

Учитывая это упрощенный компонент:

<dom-module id="poly-component"> 
<template> 
    <paper-button raised onclick="dialog.open()">Button</paper-button> 
    <paper-dialog id="dialog"><h1>Paper Dialog Here!</h1></paper-dialog> 
</template> 
<script> 
    Polymer({ 
     is: 'poly-component' 
    }) 
</script> 

, который ничего не делает больше, чем открыть диалоговое окно по нажатию кнопки. Этот модуль работает, когда он используется один раз на странице. Но когда она вставляется дважды

[...] 
<dom-module id="polyTest-app"> 
    <template> 
     <h2>Hello [[prop1]]</h2> 
     <poly-component></poly-component> 
     <poly-component></poly-component> 
    </template> 
[...] 

он больше не работает. Щелчок на кнопке приводит к:

(index):1 Uncaught TypeError: dialog.open is not a function 

я упускаю что-то?

Кода для этого примера можно найти здесь: Example Code on GitHub

Answer 1

Вашего код не может работать, потому что вы не правильно привязок обработчика событий.

Встроенный обработчик, такой как onclick, пытается выполнить бит кода в глобальной области, где dialog не существует. Отсюда и ошибка.

Вот как вы можете переписать код

<dom-module id="poly-component"> 
    <template> 
    <paper-button raised on-click="_dialogOpen">Button</paper-button> 
    <paper-dialog id="dialog"><h1>Paper Dialog Here!</h1></paper-dialog> 
    </template> 
    <script> 
    Polymer({ 
     is: 'poly-component', 
     _dialogOpen: function() { 
      this.$.dialog.open(); 
     } 
    }) 
    </script> 
</dom-module> 

Во-первых, обратите внимание, как onclick изменения on-click - Полимер event handling notation. PS. tap мероприятие рекомендуется.

Во-вторых, вы можете использовать только другие элементы из кода. Не прямо в привязках. Следовательно, функция _dialogOpen.

UPDATE

Хорошо, я знаю, что происходит. Когда есть только один элемент с заданным id, браузеры позволяют вам использовать его просто по этому идентификатору в глобальной области.

Когда вы используете Shady DOM, который, как я полагаю, вы делаете, два экземпляра вашего элемента poly-component визуализируют два <dialog id="dialog">. На данный момент window.dialog больше не доступен.

Опять же, с помощью Polymer безопаснее использовать цифру this.$ aka Automatic node finding для сравнения элементов в локальной DOM.