派生自子组件的聚合物条件类

Question

我正在学习聚合物;

1. 我无法获得条件类名称出现在我的选项卡（父）组件中。根据子组件的“selected”属性，应将“活动”类添加到<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

我已经想通了我自己，还有我的代码两个主要问题：

更新数组没有触发更新： 只添加，删除是替换项目数组中的触发更新。我改变了一个数组中一个Object的属性。聚合物仅检查对该对象的引用，该引用保持不变。所以没有变化被触发。解决方案：使用set函数更新Array（请参阅下面的代码）。

计算类需要特殊的语法： 我班=“{{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>