[英]Polymer 2.0 dom-if based on function output
相对聚合物新手,但对 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>
您的代码看起来不错,但 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>
如果您使用的是原生 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 > 删除类型扩展元素部分下找到它
像这样改变你的 dom-if 条件
<dom-if if={{condition}}>
<template>
code inside template
</template>
</dom-if>
这对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.