Обработчик полимеров не работает в моем приложении

Я создал пользовательский полимерный компонент с именем Test_custom.html и включил этот созданный полимерный компонент в файл index.html. Затем добавил тег внутрь корпуса и создал функциональность полимерного компонента, работающую нормально без каких-либо проблем.

Образец index.html

<html>
    <head>        
         <script src="assets/polymer/webcomponentsjs/webcomponents-lite.min.js"></script>  

         <link rel="import" href="assets/app/polymerComponents/Tester/Test_custom.html" />        
    </head>
    <body>
         <test-comp></test-comp> <!-- working fine it has some button on click display message-->
    </body>
</html>

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

Моя структура проекта выглядит следующим образом

app

   pages

        component

               component.html

               component .ts

пример кода для

 Test_custom.html

    <dom-module id="test-comp">
      <template>  <!-- this part is working without any issue-->
      </template>

        <script>
               var MtCompare = Polymer({
                is: "test-comp",
                properties: {
                         }


                ready: function () {
                    var self = this;
                    this.initHandlers();
                    }


      initHandlers: function () {

                    $('.button_test').on('click', function () {
                        //doing operation
                    });
                    }

                  });
        </script>

    </dom-module>

angular polymer angularjs-directive polymer-2.x
person dharmalingam lingam    schedule 17.07.2017    source источник
comment
Вы Bower установили и импортировали Polymer? Похоже, вы установили для папки bower_components значение assets/polymer/ в соответствии с импортом webcomponentsjs. (Это имя немного вводит в заблуждение, я бы просто использовал assets/bower_components). У вас должно быть <link rel="import" href="../../../../polymer/polymer/polymer.html"> в верхней части Test_custom.html   -  person hotforfeature    schedule 02.08.2017

Ответы (1)


arrow_upward
0
arrow_downward

Не уверен, что понимаю этот вопрос, но имя файла не должно совпадать с идентификатором вашего dom-модуля!?
Кроме того, вам не хватает запятой, хотя я считаю, что это больше не нужно в полимере 2. . Я также не уверен в вашем селекторе классов, это может быть также два полимера, о которых я не знаю, но я бы использовал querySelector() или идентификатор (this.$.buttonID

Еще проще было бы использовать функцию нажатия на кнопку?!
Таким образом, для файла с именем "test-custom.html" полимерный элемент должен выглядеть следующим образом:

<dom-module id="test-custom">

  <template>
  </template>

  <script>
    var MtCompare = Polymer({
      is: "test-comp",
      properties: {
      },

      ready: function () {
        this.initHandlers();
      },

      initHandlers: function () {
      var button = Polymer.dom(this.root).querySelector('.button_test');
        button.on('click', function () {
          //doing operation
        });
      }

    });
  </script>

</dom-module>
person Niklas    schedule 18.07.2017