Использование JavaScript в элементе Polymer

У меня есть объект из полимера:

<newfolder-element id="newfolderelement" popupStyle="width: 362px; height: 100px;">
    <span class="title">Utwórz nowy folder</span>
    <input type="text" class="ginput" style="width: 350px; padding: 5px;" placeholder="Nowy katalog" />
    <br />
    <button class="action blue"><span class="label">Utwórz</span></button>
    <button class="action red" id="cancelBtn"><span class="label">Anuluj</span></button>

        <script type="text/javascript">
            ...
        </script>

</newfolder-element>

Я хочу получить доступ к элементам dom в javascript, я пробовал это:

<script type="text/javascript">

                    Polymer('newfolderelement', {
                        domReady : function(){
                            $(this.shadowRoot.querySelector("#cancelBtn")).on('click', '#cancelBtn', function(){
                                console.log("clicked");
                            });
                        }
                    });
</script>

И это:

<script type="text/javascript>
                    $(this.shadowRoot.querySelector("#cancelBtn")).on('click', '#cancelBtn', function(){
                        console.log("clicked");
                    });

</script>

И это:

<script type="text/javascript>
                    $("#cancelBtn").click(function(){
                        console.log("clicked");
                    });

</script>

Но все вышеперечисленное не работает. Как получить доступ к элементам dom внутри полимерного объекта?


javascript jquery polymer
person Mother Lover    schedule 06.08.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Почему вы хотите использовать jQuery, Polymer уже предоставляет вам эту функциональность:

  • для доступа к элементам DOM используйте $ карту элемент, т.е. получить ссылку на #cancelBtn использование

    это.$.cancelBtn

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

<button class="action red" id="cancelBtn" on-click="{{cancelClicked}}"></button>

и просто добавьте метод cancelClicked в раздел сценария вашего компонента.

  <script>
    Polymer('newfolder-element', {
      cancelClicked: function() {
         // do something
      }
    });
  </script>

Это намного проще, и вашему компоненту не потребуется дополнительная библиотека.

person ain    schedule 06.08.2014
comment
Это не работает. Обратите внимание, что я хочу использовать JS не в компоненте, а в объекте компонента. - person Mother Lover; 06.08.2014
comment
О, у меня неправильное представление о том, что вы хотите... но смысл веб-компонентов в том, что внутренности компонента не просочятся в документ, поэтому то, что вы хотите, противоречит идее веб-компонентов... если компонент общедоступен API не поддерживает то, что вы хотите, тогда, возможно, переделайте его, чтобы вам не нужно было взламывать его внутренности. - person ain; 06.08.2014
comment
Вы правы, я думаю. Я хотел создать всплывающее окно базового компонента с базовыми функциями и пользовательским интерфейсом (кнопка закрытия и т. д.) и унаследовать его с различными всплывающими окнами в моем приложении (создание новой папки, загрузка файлов и т. д.), поэтому, возможно, полимер не является хорошим способом сделать это, потому что каждый всплывающее окно будет полностью отличаться от другого. - person Mother Lover; 06.08.2014