2017-01-30 1 views
0

私は、テキスト入力(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> 
+0

[最小限で完全で検証可能な例](http://stackoverflow.com/help/mcve)に関連するすべてのコードが表示されるように質問を更新してください。 –

+0

私は関連する回答で同様の質問を見たことがあります。たとえば、鉄のa11yキーを使ってkeys = "enter"を聞き、2)if(e.keyCode === 13)のように "checkForEnter"用紙入力要素の属性にon-keydown = "checkForEnter"を追加します。私がフォームを使用し、デフォルトのフォームの送信をオーバーライドする場所もあります。 –

答えて

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'); 
}, 
+0

私はそれをon-change = "inputHandler"を追加するだけで簡単に動かすことができました。なぜなら、何らかの理由でこれがenterキーを押したときにだけトリガされるからです。値に何かをバインドすると、たとえば

{{userInput}}が入力されました。

値はリアルタイムで更新されますが、関数が入力時にのみ実行されます。私はまた値を "value =" {{userInput :: input}} "に設定しましたが、" :: input "パートが何をしているのかわかりません - ご存知ですか? あなたのコードを使用してくださいこれがどのように行われたかを私に示している! –

関連する問題