聚合物2.0 DOM - 如果基於功能輸出

Question

相對聚合物新手在這裏，但不是新的JS。想了解爲什麼下面的代碼片斷不起作用。總之，我將有一個用戶對象，該對象在頁面已經加載後將被填充。該對象的屬性是roles，它只是一個字符串數組。

dom-if條件調用hasRole('user')，該函數將返回true，但是...我覺得我只是在這裏錯過了一些基本概念，並一直對我的頭反對谷歌一兩天。

我想清楚，hasRole函數在頁面加載時被調用，但不是在之後。雖然我意識到我可以讓user.isAdmin成爲布爾型，但是我需要爲每個可能的角色創建屬性，並且希望驗證系統比此更靈活。

目前，隱藏的「僅限管理員」部分從不出現。

對不起，如果這是簡單或一個愚蠢的問題或其他什麼，它只是不是我完全理解，也許甚至不知道正確的條款谷歌。

我使用的聚合物2.0.0 rc.3

<link rel="import" href="../../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html"> 

<dom-module id="test1-app"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <button on-click="toggle">Toggle</button> 
    This is visible... 

    <template is="dom-if" if="{{hasRole('admin')}}"> 
     but this is hidden. 
    </template> 
    </template> 

    <script> 
    /** @polymerElement */ 
    class Test1App extends Polymer.Element { 
     static get is() { return 'test1-app'; } 
     static get properties() { 
     return { 
      user: { 
      type: Object 
      } 
     }; 
     } 
     toggle() { 
     if(this.user) { 
      this.user = null; 
     } 
     else { 
      this.user = { 
      name: 'Carl', 
      roles: ['admin','user'] 
      } 
     } 
     } 

     static get observers() { 
     return [ 
      'userChanged(user.*)' 
     ] 
     } 
     hasRole(role) { 
     if(this.user && this.user.roles && this.user.roles.indexOf(role)>=0) { 
      return true; 

     } 
     else { 
      return false; 
     } 
     } 

     userChanged() { 
      //just observing for the sake of observing 
      console.log(this.user); 

     } 

    } 

    window.customElements.define(Test1App.is, Test1App); 
    </script> 
</dom-module> 

Answer 1

你的代碼看起來不錯，但hasRole功能只調用一次（在第一次渲染）。

嘗試使用屬性而不是函數...這種方式DOM-IF將根據該屬性值進行渲染。

這應該工作：

<link rel="import" href="../../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html"> 

<dom-module id="test1-app"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <button on-click="toggle">Toggle</button> 
    This is visible... 

    <template is="dom-if" if="{{domif}}"> 
     but this is hidden. 
    </template> 
    </template> 

    <script> 
    /** @polymerElement */ 
    class Test1App extends Polymer.Element { 
     static get is() { return 'test1-app'; } 
     static get properties() { 
     return { 
      user: { 
      type: Object 
      }, 
      domif: {type: Boolean, 
        value: true} 
     }; 
     } 
     toggle() { 
     this.domif = !this.domif; 
     if(this.user) { 
      this.user = null; 
     } 
     else { 
      this.user = { 
      name: 'Carl', 
      roles: ['admin','user'] 
      } 
     } 
     } 

     static get observers() { 
     return [ 
      'userChanged(user.*)' 
     ] 
     } 
     hasRole(role) { 
     console.log('calling hasRole') 
     if(this.user && this.user.roles && this.user.roles.indexOf(role)>=0) { 
      this.domif = true; 
      return true; 

     } 
     else { 
      this.domif = false; 
      return false; 
     } 
     } 

     userChanged() { 
      //just observing for the sake of observing 
      console.log(this.user); 

     } 

    } 

    window.customElements.define(Test1App.is, Test1App); 
    </script> 
</dom-module> 

Answer 2

如果您正在使用原生聚合物2.0元（你propably做，我可以看到），你應該使用<dom-if>元素

https://www.polymer-project.org/2.0/docs/about_20#type-extension

如果您在Polymer 2.0中使用混合元素，則應使用<dom-bind>來包裝dom。

根據聚合物2.0升級指南：

如果您有任何模板擴展元素-DOM綁定，DOM-IF或 DOM重複基在主文檔，將其轉換爲包裝的形式。

https://www.polymer-project.org/2.0/docs/upgrade

您可以根據段自定義元素API找到它>刪除類型擴展元素

Answer 3

更改DOM-if條件這樣

<dom-if if={{condition}}> 
    <template> 
    code inside template 
    </template> 
    </dom-if> 

這爲我工作。