2017-10-24 11 views
0

....ポリマー2.0紙、リストボックス、選択したイベント

私はホストからの紙のドロップダウン・メニューから、鉄の項目変更イベントをキャッチしようとしています。私の人生のために、私は構文を理解することができません。

<paper-listbox .... onclick="doSomething()"> 

が問題ありません。しかし、変更されたアイテムは変更されません。また、アイロンアイテムの変更もありません。 onIronItemsChangedではなく。または私が考えることができるイベント名の他のバリエーション。

とにかく、誰かに助けてもらえますか?お願いします???

更新日: 私は問題がイベントバブリングの問題だと思っています。属性をpaper-dropdown-menu要素のレベルまで上げようとしましたが、それは助けになりませんでした。何か案は?

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script> 
 
    <link href="/Content/site.css" rel="stylesheet"/> 
 

 
    <link rel="import" href="/bower_components/app-layout/app-scroll-effects/effects/waterfall.html"> 
 
    <link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html"> 
 
    <link rel="import" href="../bower_components/app-layout/app-header/app-header.html"> 
 
    <link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html"> 
 
    <link rel="import" href="../bower_components/paper-item/paper-item.html"> 
 
    <link rel="import" href="../bower_components/paper-listbox/paper-listbox.html"> 
 
    <link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 
 

 
    <style> 
 
     #pageContent { 
 
      margin: 20px; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body unresolved> 
 
    <app-header-layout> 
 
     <app-header slot="header" fixed condenses shadow effects="waterfall"> 
 
      <app-toolbar> 
 
       <div main-title>FTI Calculation Editor</div> 
 
      </app-toolbar> 
 
     </app-header> 
 
     <div id="pageContent"> 
 
      <paper-dropdown-menu label="Master" id="master" on-selected-item-changed="doSomething" > 
 
       <paper-listbox slot="dropdown-content" > 
 
         <paper-item>Test One</paper-item> 
 
         <paper-item>Test Three</paper-item> 
 
         <paper-item>Test Two</paper-item> 
 
       </paper-listbox> 
 
      </paper-dropdown-menu> 
 

 
      <p></p> 
 

 
      <paper-dropdown-menu label="Child" id="child"> 
 
       <paper-listbox slot="dropdown-content"> 
 
         <paper-item>C 1-1</paper-item> 
 
         <paper-item>C 1-2</paper-item> 
 
         <paper-item>C 1-3</paper-item> 
 
         <paper-item>C 2</paper-item> 
 
         <paper-item>C 3-1</paper-item> 
 
         <paper-item>C 3-3</paper-item> 
 
         <paper-item>C 3-4</paper-item> 
 
         <paper-item>C-3-2</paper-item> 
 
       </paper-listbox> 
 
      </paper-dropdown-menu> 
 
     </div> 
 
    </app-header-layout> 
 

 
    <script> 
 
     function doSomething(e) { 
 
      alert("got here"); 
 
     } 
 
    </script> 
 

 
</body> 
 
</html>

おそらく明白な、しかし、私は最終的に達成しようとしていることは最初に選択に基づいて2番目のドロップダウンをフィルタリングすることである。ここでは、ブラウザに配信されていますHTMLです。もし誰かがそれを達成するためのより良い/より簡単な方法を知っていれば、私は喜んで知りたいと思っています....

答えて

0

ドキュメントを調べてください。それはあなたに良い道を指します。 documentationのように、-on-iron-items-changedがあるので、問題はどこか別の場所にあるはずです。

最後に()の関数を呼び出すことはできません。関数を指し、実際には呼び出さないようにする必要があります。あなたは、実際のポリマーの構文を使用していないので、あなたがonclick="domsomething()"でイベントを取得する方法は何かを、それもクリックをキャッチする「古い」HTMLの方法です

<paper-listbox .... on-iron-items-changed="doSomething"> 
+0

申し訳ありませんが、括弧はタイプミスです。しかし、オンアイロンアイテムを変更してもメソッドはトリガーされません。それは私の一種のポイントです。私はそれがすべきだと思ったが、そうでなかったときに、私が逃した名前マッピングで何かが起こっていると思った。 –

0

:だからあなたのコードは、に書き換えます。しかし、あなたはそれを望んでいない可能性があります、少なくともそれはデバイスのサポートに触れることになると最高です(tatのためにタップしている)。

あなたのケースでは、今、他の答えはかなり近いです。まず関数を呼び出す必要はありません。コールバックとしてpaper-listbox要素で使用できる名前を渡す必要があります。

唯一の違いは、アイテムが変更されたときにトリガーされたイベントに興味がないことです。それはリストが変わるときです。選択したイベントが変更されたときにトリガされるイベントに興味があると思います。そのページでは、selected-item-changedというイベントがあることがわかります。つまり、on-selected-item-changed属性を使用して、そのイベントのコールバックを定義することができます。

ので、試してみてください。

<paper-listbox .... on-iron-items-changed="doSomething"> 

あなたdoSomething方法は一つのパラメータ、イベントオブジェクトを取得します。

関連する問題