ポリマー紙入力が行われたときに関数を呼び出す方法は？

Question

私は、テキスト入力（ID）を受け取り、IDがリストにあるかどうかに基づいて「はい」または「いいえ」を返すポリマーアプリケーションを持っています。理想的には、ユーザはenterを押すか「lookup」ボタンをクリックすることができ、「IDの検索」機能が呼び出される。

フォームを使用せずにこれを行うことはできますか？ フォームを使用している場合は、ポスト/プット/リクエストを作成せずにこれを行うことはできますか？データはすべて要素のプロパティ（配列）に格納されます。ポリマーのための

<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そのイベントに（そう、それはしないだろう要求）を取得し、あなたの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'); 
},