하위 구성 요소에서 파생 된 폴리머 조건부 클래스

Question

Polymer;

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

나는 두 가지 내 코드에 문제가 있었다 자신을 알아 냈어요

: 배열이 트리거에 만 제거, 추가 교체 항목입니다 : 업데이 트를 트리거하지 않은 배열을 업데이트

가 최신 정보. Array 내에서 Object의 속성을 변경했습니다. Polymer는 해당 객체에 대한 참조 만 확인하며 참조는 변경되지 않습니다. 그래서 변화가 일어나지 않았습니다. 해결책 : set 함수로 Array를 업데이트하십시오 (아래 코드 참조). = "{{경우, getClassName (="{{경우, getClassName이 (item.selected}} "클래스가 추가되지 않은 것은 내가 지금 올바른 구문을 알고 클래스 $를 내 클래스된다.

계산 된 클래스는 특수 구문이 필요합니다 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>