在聚合物不能正常工作的簡單加蓋的IF

我想要構建一個簡單的組件，它將顯示基於條件的模板。在聚合物不能正常工作的簡單加蓋的IF

如果user.isAdmin是true然後顯示管理區，否則顯示嘉賓區。

出於某種原因，沒有出現2個模板區域。我錯過了什麼？

這是我的組件：

<dom-module id="custom-component"> 
    <!--DOM--> 
    <template> 

    <template is="dom-if" if="{{!user.isAdmin}}"> 
     Guest Area 
    </template> 

    <template is="dom-if" if="{{user.isAdmin}}"> 
     Admin Area 
    </template> 

    </template> 
    <!--Scripts--> 
    <script> 
    Polymer({ 
     is: 'custom-component', 
     properties: { 
     user: {"name":"Sample Name","isAdmin":true} 
     } 
    }); 
    </script> 

</dom-module>

來源

2015-09-28 Nicholas Kyriakides

爲屬性的默認值可以在屬性對象使用值字段中指定。該值可以是原始值，或返回值的函數（應該用於初始化對象和數組以避免實例上的共享對象）。

來源：https://www.polymer-project.org/1.0/docs/devguide/properties.html#configure-values

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <base href="http://polygit.org/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link href="polymer/polymer.html" rel="import"> 
 
</head> 
 

 
<body> 
 
    <dom-module id="unsupported-message"> 
 
    <!--DOM--> 
 
    <template> 
 

 
     <template is="dom-if" if="{{!user.isAdmin}}"> 
 
     Guest Area 
 
     </template> 
 

 
     <template is="dom-if" if="{{user.isAdmin}}"> 
 
     Admin Area 
 
     </template> 
 

 
    </template> 
 
    <!--Scripts--> 
 
    <script> 
 
     Polymer({ 
 
     is: 'unsupported-message', 
 
     properties: { 
 
      user: { // You'll have to declare your object properties this way 
 
      type: Object, 
 
      value: function() { 
 
       return { 
 
       "name": "Mr. Admin", 
 
       "isAdmin": true 
 
       }; 
 
      } 
 
      } 
 
     } 
 
     }); 
 
    </script> 
 

 
    </dom-module> 
 
    <unsupported-message></unsupported-message> 
 
</body> 
 

 
</html>

來源

2015-09-28 13:23:12

謝謝 - 文件可能已經更加明確在這一個在數據綁定部分 –

在聚合物不能正常工作的簡單加蓋的IF

回答

相關問題