Как добавить прослушиватель кликов в дочерний элемент пользовательского элемента полимера?

Question

Я пытаюсь добавить прослушиватель кликов к одной из кнопок внутри пользовательского элемента в «создан» обратный вызов жизненного цикла (даже попробовал «ready» callback с тем же результатом).

Я выбрал ошибку «элемент кнопки не определен/null».

---

Примечание:

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

listeners: { 
     'click': '_onClick' 
    }, 

Мне просто нужно добавить слушателя к кнопке. Как получить эту простую вещь? Извините, я выгляжу наивно.

b. Не удается сделать инлайн-скрипт из-за ограничения НСП

<paper-button id='saveBtn' on-click="handleClick"> 
    Save 
</paper-button> 

---

Error Msg:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Polymer.created @ elements-imports.csp.js:10596Polymer.Base._addFeature._invokeBehavior @ elements-imports.csp.js:267Polymer.Base._addFeature._doBehavior @ elements-imports.csp.js:262Polymer.Base.createdCallback @ elements-imports.csp.js:97Polymer.Base._addFeature.instanceTemplate @ elements-imports.csp.js:535Polymer.Base._addFeature._stampTemplate @ elements-imports.csp.js:531Polymer.Base._addFeature._initFeatures @ elements-imports.csp.js:4627Polymer.attached @ elements-imports.csp.js:5612Polymer.Base._addFeature._invokeBehavior @ elements-imports.csp.js:267Polymer.Base._addFeature._doBehavior @ elements-imports.csp.js:262Polymer.Base.attachedCallback @ elements-imports.csp.js:102Polymer.Base._addFeature.attachedCallback @ elements-imports.csp.js:603Polymer.Base._addFeature._readySelf @ elements-imports.csp.js:591(anonymous function) @ elements-imports.csp.js:5554Polymer.ImportStatus._importsLoaded @ elements-imports.csp.js:5553(anonymous function) @ elements-imports.csp.js:5564checkDone @ webcomponents-lite.js:968watchImportsLoad @ webcomponents-lite.js:990(anonymous function) @ webcomponents-lite.js:939whenDocumentReady @ webcomponents-lite.js:957checkReady @ webcomponents-lite.js:952

---

Пользовательский элемент:

<dom-module id="my-form"> 
    <template> 
     <div> 
      <paper-input id="inputName" label="Name" required error-message="Required Input"> Name </paper-input> 
      <paper-input id="inputServer" label="Server URL" required error-message="Required Input"> Server </paper-input> 
      <paper-input id="inputUsername" label="Username" required error-message="Required Input">Username</paper-input> 
      <paper-input id="inputPassword" label="Password" type="password" required error-message="Required Input" value="">Password</paper-input> 
      <div class="rows layout horizontal right-justified certificate"> 
       <paper-button id='cancelBtn' tabindex="0">Cancel</paper-button> 
       <paper-button id='saveBtn' tabindex="0">Save</paper-button> 
      </div> 
     </div> 
    </template> 
</dom-module> 
<script> 
Polymer({ 

    is: 'my-form', 

    created: function() { 
     var saveBtn = document.querySelector('#saveBtn'); 
     saveBtn.addEventListener('click', function() { 
      document.getElementById('inputName').validate(); 
      document.getElementById('inputServer').validate(); 
      document.getElementById('inputUsername').validate(); 
      document.getElementById('inputPassword').validate(); 
     }); 
    }, 
}); 

Answer 1

on-click="handleClick"

Не встроенный код, это просто атрибут, поэтому он отлично работает под CSP.

created()

Слишком рано, ваши элементы еще не созданы.

ready()

Ваши элементы выполнены в данный момент, но они не обязательно в document, поэтому использование document.querySelector (или document.getElement*) является плохой идеей.

Однако полимер обеспечивает отображение элементов в шаблоне по идентификатору как свойство называется $, так что вы можете написать var saveBtn = this.$.saveBtn (но вы должны использовать on-click вместо этого).