Polymer 2.0 dom-if 基於函數輸出

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

如果您使用的是原生 Polymer 2.0 元素（您可以按照我的理解去做），您應該使用<dom-if>元素

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

如果您在 Polymer 2.0 中使用混合元素，您應該用<dom-bind>包裹 dom-if。

根據 Polymer 2.0 升級指南：

如果主文檔中有任何模板擴展元素（dom-bind、dom-if 或 dom-repeat），請將它們轉換為包裝形式。

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>

這對我有用。