Как вызвать функцию при подаче полимерного бумажного ввода?

Question

У меня есть полимерное приложение, которое принимает текстовый ввод (ID) и возвращает «да» или «нет» на основании того, находится ли идентификатор в списке или нет. В идеале пользователь может нажать кнопку «Ввод» или нажать кнопку «Поиск», и функция «поиск идентификатора» будет вызвана.

Могу ли я сделать это, не используя форму? Если я использую форму, могу ли я сделать это, не делая запрос post/put/get? Все данные хранятся в свойстве (массиве) элемента.

<dom-module id="demo-app"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <paper-card heading="Search for ID"> 
     <div class="card-content"> 
     <paper-input id="input" always-float-label label="ID"</paper-input> 
     </div> 
    </paper-card> 
    </template> 

    <script> 
    Polymer({ 

     is: 'demo-app', 

     properties: { 
     myIds: { 
      type: Array, 
      value: ['testID1', 'testID2'], 
     }, 
     inputObj: { 
      type: Object, 
      value: function(){ 
      return this.$.input; 
      } 
     }, 
     userInput: { 
      type: String, 
     }, 
     }, 
     onEnter: function(){ 
     if(this.myIds.includes(this.userInput)) { 
      console.log(this.userInput); 
     } 
     }, 

    }); 
    </script> 
</dom-module> 

Answer 1

Наилучшая практика для полимеров является «использовать платформу», и в этом случае HTML (поведение по умолчанию кнопки является представить свою форму) & немного JavaScript будет работать.

В частности, завернуть ввод в форму и добавить кнопку:

<form id="demoAppForm"> 
    <paper-card heading="Search for ID"> 
    <div class="card-content"> 
     <paper-input id="input" always-float-label label="ID"</paper-input> 
    </div> 
    <button>Lookup</button> 
    </paper-card> 
<form> 

А затем настроить слушателя событий для того, когда форма была отправлена, preventDefault на это событие (так что он не будет делать GET запрос), и делать то, что вы хотите с данными, добавляя эти функции к вашему Polymer({...}) вызова:

attached: function() { 
    this.listen(this.$.demoAppForm, 'submit', 'onSubmit'); 
}, 

onSubmit: function(event) { 
    event.preventDefault(); 
    console.log('Lookup this:', this.$.input.value); 
}, 

Убедитесь, что вы удалите прослушиватель события тоже, когда отсоединяется элемент:

detached: function() { 
    this.unlisten(this.$.demoAppForm, 'submit', 'onSubmit'); 
},