Polymer dom-if what comes after the if?
Question
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 .
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);} .
The live mode seems to always be showing no matter what. I tried using square brackets ( [[]] ), curly brackets ( {{}} ), and even no brackets ( 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:
<my-app demo-mode></my-app>
(I'm open to other ways of doing this, if anyone has input!)
2 answers
solution1
3 2017-03-02 04:44:38
As @montrealist indicated, the if property should evaluate to a Boolean. 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. I assume demoMode has a falsy default value, which would cause _isLive() to always evalulate to true .
Since _isDemo() and _isLive() both depend on this.demoMode , your computed binding should be _isDemo(demoMode) and _isLive(demoMode) , respectively:
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()"). 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.
solution2
1 2017-03-02 02:34:40
I don't think you can pass a function into the if . The API specifically mentions a boolean . From doc:
Elements can be conditionally stamped based on a boolean property by wrapping them in a custom HTMLTemplateElement type extension called dom-if
Just stick to properties. Also, your syntax may be based on an older version of 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 ).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.