子成分由来のポリマー条件クラス

Question

私はポリマーを学んでいます。

1. 私のタブ（親）コンポーネントに表示される条件付きクラス名を取得できません。子コンポーネントの 'selected'プロパティに応じて、 'active'クラスを<li>要素に追加する必要があります。
2. 私は親と子のコンポーネント間のやりとりの私のやり方が最初であるとは確信していません。それは働いているが、それは右に感じることはありません...

私のindex.htmlファイル

<link rel="import" href="components/tabs.html"> 
<link rel="import" href="components/tab.html"> 

<ikb-tabs> 
    <ikb-tab heading="Tab #1"> 
     <p>Content of the first tab</p> 
    </ikb-tab> 
    <ikb-tab heading="Tab #2" selected> 
     <p>Content of the second tab</p> 
    </ikb-tab> 
</ikb-tabs> 

マイ部品/ tabs.htmlファイル

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<dom-module id="ikb-tabs"> 
    <template> 
     <style> 
      .active button { 
       color: red; 
      } 
     </style> 

     <nav> 
      <ul> 
       <template is="dom-repeat" items="{{tabs}}"> 
        <li> 
         <button on-tap="openTab">{{item.heading}}</button> 
        </li> 
       </template> 
      </ul> 
     </nav> 
     <content></content> 
    </template> 
    <script> 
     Polymer({ 
      is: 'ikb-tabs', 
      properties: { 
       activeTab: Number 
      }, 
      ready: function() { 
       this.tabs = Polymer.dom(this).children; 
      }, 
      openTab: function (e) { 
       Polymer.dom(this).children.forEach(function (tab, index) { 
        tab.selected = index === e.model.index; 
       }); 
      } 
     }); 
    </script> 
</dom-module> 

私のコンポーネント/ tab.htmlファイル

私は自分自身をそれを考え出した

<link rel="import" href="../../bower_components/polymer/polymer.html"> 

<dom-module id="ikb-tab" attributes="heading"> 
    <template> 
     <template is="dom-if" if="{{selected}}"> 
      <div> 
       <content></content> 
      </div> 
     </template> 
    </template> 

    <script> 
     Polymer({ 
      is: 'ikb-tab', 
      properties: { 
       heading: String, 
       selected: { 
        type: Boolean 
       } 
      } 
     }); 
    </script> 
</dom-module> 

Answer 1

、二つの主要な問題は、私のコードであった：配列の更新

は更新をトリガしませんでした： のみ、追加、削除は、配列内のアイテムを交換するANをトリガー更新。私は配列内のオブジェクトのプロパティを変更しました。 Polymerはそのオブジェクトへの参照だけをチェックし、参照は変更されません。だから変化は起こらなかった。解決策：配列関数をset関数で更新します（以下のコードを参照）。

計算さクラスは、特別な構文が必要です 私のクラス=「{{getClassNameメソッド（item.selected}}」すべてのクラスを追加していなかった私は今、{{getClassNameメソッドは、（ "=正しい構文がクラス$である知っています。 item.selected）}}」

詳細情報：https://www.polymer-project.org/1.0/docs/devguide/data-binding#native-binding

簡素化作業コード：

<dom-module id="ikb-tabs"> 
    <template> 
     <nav> 
      <ul> 
       <template is="dom-repeat" items="{{tabs}}"> 
        <li class$="{{getClassName(item.selected)}}"> 

         <button on-tap="openTab">{{item.heading}}</button> 
        </li> 
       </template> 
      </ul> 
     </nav> 
     <div> 
      <content></content> 
     </div> 
    </template> 
    <script> 
     Polymer({ 
      is: 'ikb-tabs', 
      properties: { 
       tabs: { 
        type: Array 
       } 
      }, 
      ready: function() { 
       this.tabs = Polymer.dom(this).children; 
      }, 
      openTab: function (e) { 
       var self = this; 

       this.tabs.forEach(function (tab, index) { 
        self.set('tabs.' + index + '.selected', index === e.model.index) 
       }); 
      }, 
      getClassName: function (isSelected) { 
       return isSelected ? 'active' : null; 
      } 
     }); 
    </script> 
</dom-module>