傳承聚合物的HTML屬性嵌套組件

Question

我有一個自定義元素<x-marker>與<paper-checkbox>它裏面。

我想在我的元素上有一個checked屬性來反映<paper-checkbox>，但我的解決方案似乎不是這樣做的方式。

HTML：

<x-marker is-checked="<%= someBoolean %>"></x-marker> 

元素：

<dom-module id="x-marker"> 

    <template> 
    <div> 
     <paper-checkbox id="checkbox"></paper-checkbox> 
    </div> 
    </template> 

    <script> 
    Polymer({ 
     is: 'x-marker', 

     properties: { 
     isChecked: String 
     }, 

     listeners: { 
     change: 'changeHandler' 
     }, 

     attached: function() { 
     if (this.isChecked === 'true') { 
      this.$.checkbox.setAttribute('checked', this.isChecked); 
     } 
     }, 

     changeHandler: function (event, detail, sender) { 
     //... 
     } 
    }); 
    </script> 

</dom-module> 

聚合物0.5你可以使用checked?="{{isChecked}}"，但是這似乎並沒有在1.0的工作了。同樣硬編碼<paper-checkbox checked="false">仍然檢查只要該屬性存在的複選框。價值似乎並不重要，這就是爲什麼屬性本身必須被綁定，而不是它的價值。

我似乎無法想出解決辦法，包括處理財產作爲字符串=== 'true'，而不是一個布爾值，直將其綁定到<paper-checkbox>

Answer 1

在1.0，你只需要使用checked="{{isChecked}}"。可以按如下方式實現：

HTML：

<x-marker checked="{{someBoolean}}"></x-marker> 

元：

<dom-module id="x-marker"> 

    <template> 
    <div> 
     <paper-checkbox id="checkbox" checked="{{checked}}">Check me</paper-checkbox> 
    </div> 
    </template> 

    <script> 
    Polymer({ 
     is: 'x-marker', 

     properties: { 
     checked: { 
      type: Boolean, 
      observer: '_checkChanged' 
     } 
     }, 

     _checkChanged: function(newValue, oldValue) { 
     // Do something 
     } 

    }); 
    </script> 

</dom-module>