Polymer 2.0 dom-if 基于函数输出

Question

这里是 Relative Polymer 新手，但对 JS 来说并不陌生。想了解为什么以下代码片段不起作用。简而言之，我将有一个用户对象，该对象将在页面加载后填充。该对象的属性是 roles，它只是一个字符串数组。

dom-if 条件调用 hasRole('user')，该函数将 return 为真，但是......我觉得我只是在这里遗漏了一些基本概念并且一直在敲打我的脑袋反对 google 一两天。

我想明确一点，hasRole 函数在页面加载时被调用，但之后不会被调用。虽然我确实意识到我可以让 user.isAdmin 成为布尔值，但我需要为每个可能的角色创建属性，并且希望身份验证系统比这更灵活。

目前，隐藏的 "admin only" 部分永远不会出现。

抱歉，如果这是一个简单或愚蠢的问题或其他问题，我还没有完全理解它，甚至可能不知道 google.

的正确术语

我正在使用 Polymer 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

如果您使用的是原生 Polymer 2.0 元素（如我所见，您可能会这样做），您应该使用 <dom-if> 元素

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

如果您在 Polymer 2.0 中使用混合元素，您应该将 dom-if 换成 <dom-bind>。

根据 Polymer 2.0 升级指南：

If you have any template extension elements—dom-bind, dom-if, or dom-repeat—in the main document, convert them to the wrapped form.

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

您可以在 自定义元素部分下找到它 API > 删除类型扩展元素

Answer 2

您的代码看起来不错，但 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 3

改变你的 dom-if 条件是这样的

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

这对我有用。

Polymer 2.0 dom-if 基于函数输出

Polymer 2.0 dom-if based on function output

javascript

polymer