親のポリマーペーパー崩壊アイテム交換クラス

Question

<div>内に別の<div>の中にポリマー<paper-collapse-item>があります。 <paper-collapse-item>が開かれたら、別のクラスを<div class="container">に追加したいと思います。しかし、Polymerは関数が定義されていないと私に伝えます。今私が持っている：

HTML：

<div class="container> 
    <h1>Header</h1> 
    <div class="box" onclick="[[_expandBox()]]"> 
     <paper-collapse-item class="header" header=""> 
      <p class="longText">Some long text</p> 
     </paper-collapse-item> 
    </div> 
</div> 

スクリプト：

<script> 
    Polymer({ 
     is: 'text-page', 

     _expandBox: function() { 
     var exp = this.getElementsByClassName("header")[0]; 
     var expPar = this.getElementsByClassName("box")[0].parentNode; 
     if (exp.hasAttribute(opened)) { 
      expPar.className += " paropen"; 
     } 
     } 
    }); 
</script> 

だから私は、私は適切に関数を呼び出すと、それはコンテナにクラスを追加することができますか？私は様々な理由のために全体のセットアップにいくつかの変更を加えました

EDIT

。まだこの問題が残っています。

HTML：

<div class="container> 
    <h1>Header</h1> 
    <collapse-item opened="{{opened}}" on-tap="_expandBox(opened)"></collapse-item> 
</div> 

スクリプト：リスナーメソッド_expandBox(opened)は私が学ぶ助けるため

おかげで定義されていません。

<script> 
    Polymer({ 
     is: 'text-page', 

     _expandBox: function(opened) { 
     var exp = this.getElementsByClassName("container")[0]; 
     if (opened) { 
      exp.className += " paropen"; 
     } 
     } 
    }); 
</script> 

これは、と言われます。私はPolymerを初めて使う人です。

Answer 1

Polymer Documentationに続いて、 "on-"の後にジェスチャーイベントタイプを記述する必要があります。イベントハンドラ内で大括弧も削除する必要があります。あなたの場合：

<div class="box" on-click="_expandBox"> 

EDIT：

あなたは（パラメータなし）この場合on-tap="_expandBox"で、リスナーを追加する必要があります上のタップイベント宣言で。イベントタップが発生すると、イベントオブジェクトは、最初のパラメータとして関数に自動的に渡されます。

_expandBox: function(event) { 
    console.log(event.detail); 
} 

あなたのコードは次のようになります。

HTML：

<div class="container> 
    <h1>Header</h1> 
    <collapse-item id="collapseItem" on-tap="_expandBox" opened="[[_functionWithParamsThatChangesThis(param1, param2, ...)]]"></collapse-item> 
</div> 

スクリプト：

<script> 
    Polymer({ 
     is: 'text-page', 

     _expandBox: function() { 
     var exp = this.getElementsByClassName("container")[0]; 
     if (this.$.collapseItem.opened) { 
      exp.className += " paropen"; 
     } 
     } 

     _functionWithParamsThatChangesThis(param1, param2, ...) { 
     if (param1, param2, ...) return true; 
     return false; 
     } 
    }); 
</script>