简体   繁体   中英

Make 'dom-if' check the condition against a property in another element?

I have some code that looks like this:

..
<template is="dom-if" if="_myMethod()">
   <div>Hello world</div>
</template>
..

_myMethod looks like this:

_myMethod: function(){
   return this.$.someOtherObject.someList.size() == 0;
}

As you can see the method return a value from some other polymer-element in the page. But how do I get the dom-if to change it's "state" when my other polymer-element changes?

I know that if I pass a value to the method, like this: _myMethod(someValue) if someValue changes it will update the dom-if , but I need to "observe" a change in another polymer-element . How do I do what I wanna do?

With some experimentation I ended up with the following:

..
<my-other-element on-some-list-changed="_notifyChange" id="someOtherObject">
</my-other-element>
..
..
<template is="dom-if" if="_myMethod(didChange)">
   <div>Hello world</div>
</template>
..
..
_notifyDidChange: function()
{
   this.didChange = !this.didChange;
}
_myMethod: function(didChange){
   return this.$.someOtherObject.someList.size() == 0;
}

The dom-if will now update if the value (array) on the other element changes. Not sure if there's a bug (with arrays), but I tried binding to someOtherObject.someList directly and sync changes between the two elements, they synced, but events weren't triggered properly and thus the dom-if wouldn't update. :(

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM