聚合物dom-如果之后会发生什么？
[英]Polymer dom-if what comes after the if?
问题描述
我有一个demoMode布尔属性为我的元素，我希望在属性显示一些假数据true和实时数据时，它的false 。
我试过了：
<template dom-if if="{{_isDemo()}}">hello from demo</template>
<template dom-if if="{{_isLive()}}">hello from live</template>
函数只是{return this.demoMode;}和{return !(this.demoMode);} 。
无论如何，现场模式似乎总是显示出来。 我尝试使用方括号（ [[]] ），大括号（ {{}} ），甚至没有括号（ if="_isDemo()" ）。 我需要使用它们吗？
它目前的工作方式是应用程序，并且有一个demo/index.html发送demo-mode属性，如：
<my-app demo-mode></my-app>
（如果有人提出意见，我会采取其他方式做到这一点！）
2 个解决方案
解决方案1
3 2017-03-02 04:44:38
正如@montrealist指出的那样， if属性应该计算为布尔值。 绑定本身不需要布尔值; 它也可以是一个返回布尔值的计算绑定 / 属性 。
您正在为if条件使用计算绑定，但绑定缺少变量依赖项（即参数），因此在初始化时仅计算一次。 我假设demoMode有一个虚假的默认值，这将导致_isLive()始终评估为true 。
由于_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>
我尝试使用方括号（
[[]]），大括号（{{}}），甚至没有括号（if="_isDemo()"）。 我需要使用它们吗？
是的，你需要它们。 数据绑定（包括计算绑定）需要括号（方形或卷曲）。 通常，大括号表示双向数据绑定，而方形表示单向。 对于计算绑定，它们都具有相同的效果。
解决方案2
1 2017-03-02 02:34:40
我不认为你可以将函数传递给if 。 API 专门提到了一个布尔值 。 来自doc：
可以通过将元素包装在名为dom-if的自定义HTMLTemplateElement类型扩展中，根据布尔属性有条件地标记元素
坚持住房产。 此外，您的语法可能基于旧版本的Polymer。 您需要声明条件模板，如下所示：
<template is="dom-if" if="{{demo}}">hello from demo!</template>
这是一个有效的plunkr （所有逻辑都在name-tag.html ）。
聚合物dom-如果不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.