I have this template dom-if using Polymer 1.X, and it is not working.
It is supposed to display 'Loading' when requirement.allLoaded
is false
and display the real content when requirement.allLoaded
is true
.
I switch the state of this variable in my test function. But it doesn't take effects.
//Properties requirement: { type:Object, value: { allLoaded: false, tagsLoaded: false } } //Test function _testButton: function(){ console.log(this.requirement); this.requirement.allLoaded = !this.requirement.allLoaded; console.log(this.requirement); },
<div id="modal-content"> <template is="dom-if" if={{!requirement.allLoaded}}> <p>Loading</p> </template> <template is="dom-if" if={{requirement.allLoaded}}> <iron-pages selected="[[selectedTab]]" attr-for-selected="name" role="main"> <details-tab name="details"></details-tab> <bar-chart-tab name="barchart"></bar-chart-tab> <live-data-tab name="livedata" shared-info='{{sharedInfo}}'></live-data-tab> </iron-pages> </template> </div>
Note: I already used this structure to display/not display things in other project (with Polymer 2) and it was working.
Is it only the change that does not work? Ie it shows correctly on load?
Try notifying Polymer of the change: this.requirement.allLoaded = !this.requirement.allLoaded; this.notifyPath('requirement.allLoaded');
this.requirement.allLoaded = !this.requirement.allLoaded; this.notifyPath('requirement.allLoaded');
You could also use this.set('property.subProperty', value)
for Observable Changes .
In your case, that's this.set('requirement.allLoaded', !this.requirement.allLoaded);
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.