Javascript 基于函数输出的Polymer 2.0 dom if

相对聚合物新手在这里，但不是新的JS。想了解为什么下面的代码snip不起作用。简言之，我将有一个用户对象，在页面已经加载后填充该对象。该对象的一个属性是

roles

，它只是一个字符串数组

dom如果

条件正在调用

hasRole（'user'）

，函数将返回true，但是。。。我觉得我只是缺少了一些基本的概念，在这一两天里我一直在与谷歌进行着激烈的斗争

我想很清楚，hasRole函数是在页面加载时被调用的，而不是在页面加载之后。虽然我意识到我可以让

user.isAdmin

成为一个bool，但我需要为每个可能的角色创建属性，并且希望auth系统比这更灵活

目前，隐藏的“仅管理员”部分从未出现

对不起，如果这是一个简单或愚蠢的问题或其他什么，这只是我还没有完全理解，甚至可能不知道谷歌的正确术语

我正在使用聚合物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>

：主持人{
显示：块；
}
切换
这是可见的。。。
但这是隐藏的。
/**聚合反应*/
Test1App类扩展了Polymer.Element{
静态get是（）{return'test1 app'；}
静态获取属性（）{
返回{
用户：{
类型：对象
}
};
}
切换（）{
if（this.user）{
this.user=null；
}
否则{
此用户={
姓名：'卡尔'，
角色：['admin'，'user']
}
}
}
静态获取观察器（）{
返回[
'用户已更改（用户。*）'
]
}
角色{
如果（this.user&&this.user.roles&&this.user.roles.indexOf（role）>=0）{
返回true；
}
否则{
返回false；
}
}
userChanged（）{
//只是为了观察而观察
console.log（this.user）；
}
}
window.customElements.define（Test1App.is，Test1App）；

如果您使用的是天然聚合物2.0元素（您可能会像我看到的那样使用），您应该使用

元素

如果在Polymer 2.0中使用混合元素，则应使用

包装dom If

根据Polymer 2.0升级指南：

如果有任何模板扩展元素dom bind、dom If或 在主文档中重复dom，将它们转换为包装的表单

---

您可以在“自定义元素API>删除类型扩展元素”一节中找到它，您的代码看起来不错，但是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>

：主持人{
显示：块；
}
切换
这是可见的。。。
但这是隐藏的。
/**聚合反应*/
Test1App类扩展了Polymer.Element{
静态get是（）{return'test1 app'；}
静态获取属性（）{
返回{
用户：{
类型：对象
},
多米夫：{type:Boolean，
值：true}
};
}
切换（）{
this.domif=！this.domif；
if（this.user）{
this.user=null；
}
否则{
此用户={
姓名：'卡尔'，
角色：['admin'，'user']
}
}
}
静态获取观察器（）{
返回[
'用户已更改（用户。*）'
]
}
角色{
console.log（'调用hasRole'）
如果（this.user&&this.user.roles&&this.user.roles.indexOf（role）>=0）{
this.domif=true；
返回true；
}
否则{
this.domif=false；
返回false；
}
}
userChanged（）{
//只是为了观察而观察
console.log（this.user）；
}
}
window.customElements.define（Test1App.is，Test1App）；

如果出现这种情况，请更改您的dom

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

模板内的代码

---

这对我很有用。

你能举个例子，说明在这个例子中模板代码应该是什么样子吗？我试着把它包起来。我觉得我很接近了，但是hasRole函数再也不会被调用了。不要使用

。相反，请使用

…

。不幸的是，文件还没有明确说明这一点。它需要改进。我试图避免的是在属性中出现“isAdmin”、“isGuest”、“isbanked”等bools。你的答案是可行的，但希望不必为每个角色更改代码。我是否应该创建一些观察者，每当user.roles数组更改时，它都会动态编辑/重新创建子对象，比如users.permissions.isAdmin等等？我也不确定这是否可行，但可以尝试一下。我投票认为这是一个解决方案，因为它会引导我找到一个即使不是完美的解决方案。我加入了一个观察者，每当角色改变时，它都会更新权限对象，它会将该对象的属性命名为isAdmin isGuest等，这样我就不必反复创建它，也不必在以后修改代码。干杯