[英]Polymer dom-if what comes after the if?
I have a demoMode
Boolean property for my element, and I want to display some dummy data when the property is true
and live data when it's false
. 我有一个
demoMode
布尔属性为我的元素,我希望在属性显示一些假数据true
和实时数据时,它的false
。
I've tried: 我试过了:
<template dom-if if="{{_isDemo()}}">hello from demo</template>
<template dom-if if="{{_isLive()}}">hello from live</template>
where the functions are just {return this.demoMode;}
and {return !(this.demoMode);}
. 函数只是
{return this.demoMode;}
和{return !(this.demoMode);}
。
The live mode seems to always be showing no matter what. 无论如何,现场模式似乎总是显示出来。 I tried using square brackets (
[[]]
), curly brackets ( {{}}
), and even no brackets ( if="_isDemo()"
). 我尝试使用方括号(
[[]]
),大括号( {{}}
),甚至没有括号( if="_isDemo()"
)。 Do I need to use them? 我需要使用它们吗?
The way it currently works is there's the app, and there's a demo/index.html
that sends the demo-mode
attribute like: 它目前的工作方式是应用程序,并且有一个
demo/index.html
发送demo-mode
属性,如:
<my-app demo-mode></my-app>
(I'm open to other ways of doing this, if anyone has input!) (如果有人提出意见,我会采取其他方式做到这一点!)
As @montrealist indicated, the if
property should evaluate to a Boolean. 正如@montrealist指出的那样,
if
属性应该计算为布尔值。 The binding does not need to be a Boolean itself; 绑定本身不需要布尔值; it could also be a computed binding / property that returns a Boolean.
它也可以是一个返回布尔值的计算绑定 / 属性 。
You're using a computed binding for the if
condition, but the binding is missing a variable dependency (ie, an argument), so it's evaluated only once at initialization. 您正在为
if
条件使用计算绑定,但绑定缺少变量依赖项(即参数),因此在初始化时仅计算一次。 I assume demoMode
has a falsy default value, which would cause _isLive()
to always evalulate to true
. 我假设
demoMode
有一个虚假的默认值,这将导致_isLive()
始终评估为true
。
Since _isDemo()
and _isLive()
both depend on this.demoMode
, your computed binding should be _isDemo(demoMode)
and _isLive(demoMode)
, respectively: 由于
_isDemo()
和_isLive()
都依赖于this.demoMode
,因此您的计算绑定应分别为_isDemo(demoMode)
和_isLive(demoMode)
:
HTMLImports.whenReady(() => { Polymer({ is: 'x-foo', properties: { demoMode: { type: Boolean, value: false } }, _isDemo: function(demo) { return demo; }, _isLive: function(demo) { return !demo; }, _toggleDemo: function() { this.demoMode = !this.demoMode; } }); });
<head> <base href="https://polygit.org/polymer+1.8.1/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <button on-tap="_toggleDemo">Toggle Demo Mode</button> <template is="dom-if" if="{{_isDemo(demoMode)}}"> <h1>Demo Mode</h1> </template> <template is="dom-if" if="{{_isLive(demoMode)}}"> <h1>Live Mode</h1> </template> </template> </dom-module> </body>
I tried using square brackets (
[[]]
), curly brackets ({{}}
), and even no brackets (if="_isDemo()"
).我尝试使用方括号(
[[]]
),大括号({{}}
),甚至没有括号(if="_isDemo()"
)。 Do I need to use them?我需要使用它们吗?
Yes, you need them. 是的,你需要它们。 Data bindings (including computed bindings) require the brackets (either square or curly).
数据绑定(包括计算绑定)需要括号(方形或卷曲)。 Normally, the curly brackets indicate a two-way data binding, while the square ones indicate one-way.
通常,大括号表示双向数据绑定,而方形表示单向。 For computed bindings, they both have the same effect.
对于计算绑定,它们都具有相同的效果。
I don't think you can pass a function into the if
. 我不认为你可以将函数传递给
if
。 The API specifically mentions a boolean . API 专门提到了一个布尔值 。 From doc:
来自doc:
Elements can be conditionally stamped based on a boolean property by wrapping them in a custom HTMLTemplateElement type extension called dom-if
可以通过将元素包装在名为dom-if的自定义HTMLTemplateElement类型扩展中,根据布尔属性有条件地标记元素
Just stick to properties. 坚持住房产。 Also, your syntax may be based on an older version of Polymer.
此外,您的语法可能基于旧版本的Polymer。 You need to declare the conditional template like so:
您需要声明条件模板,如下所示:
<template is="dom-if" if="{{demo}}">hello from demo!</template>
Here's a working plunkr (all the logic is inside name-tag.html
). 这是一个有效的plunkr (所有逻辑都在
name-tag.html
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.