Geek Answers Handbook

In Polymer 1.0, how can I bind data to a boolean property of an element?

How can I bind to a boolean property of an element. It seems to be

<my-element a-property-of-type-boolean='{{someBoolean}}'></my-element>

doesn't work, but I also can't find out how to bind to it when it displays as follows:

 <my-element a-property-of-type-boolean></my-element>

The choice seems to be to set the Object type to Boolean, but I'm not sure how important this approach is

Thanks: -)

+5
source share
4 answers

If you put an attribute in your element, the property associated with it will always be true. For example, in:

 <my-element a-property-of-type-boolean='false'></my-element>

a-property-of-type-boolean true.

So, if you want to use the Boolean property for your element, I suggest declaring the property with the default value of false, and then if you need to change the value to true, you can add an element attribute to it.

Your Polymer Prototype:

 Polymer({ is: 'my-element', properties: { aPropertyOfTypeBoolean: { type: Boolean, value: false } } });

Your item:

 <my-element a-property-of-type-boolean></my-element>
+5
source

As you can see, the behavior of logical properties has changed in Polymer 1.0 ( ref ) and now follows the specification of HTML boolean attributes.

You have different solutions, but so far I have not found a clean solution.

As a preface to the solution, I will make a small improvement (by adding an identifier to the problem element) in your code:

 <dom-module id='main-page'> <template> <paper-button on-tap='tap'>Click me</paper-button> <my-element id="myElem" a-property-of-type-boolean></my-element> <div>In main page it is <div>{{someBoolean}}</div></div> </template> </dom-module>

  • ( ref ) You can listen to the notification and manually add and remove an attribute from your element ( ref ).

     tap: function() { if (this.aPropertyOfTypeBoolean) { Polymer.dom(this.$.myElem).removeAttribute('aPropertyOfTypeBoolean'); } else { Polymer.dom(this.$.myElem).setAttribute('aPropertyOfTypeBoolean', true); } }

  • If you edit the use of the Boolean attribute, you can also set its property as follows: (it will not reflect in html unless you use reflectToAttribute: true in the property defined as Boolean) :.

     tap: function() { this.$.myElem.set('aPropertyOfTypeBoolean', Boolean(this.aPropertyOfTypeBoolean)); }

  • Or you can hide your element using hidden or templates if .

 <template is="dom-if" if="{{someBoolean}}"> <my-element a-property-of-type-boolean></my-element> </template> <template is="dom-if" if="{{!someBoolean}}"> <my-element></my-element> </template>
  • With hidden

 <my-element hidden$="{{someBoolean}}"></my-element> <my-element a-property-of-type-boolean hidden$="{{!someBoolean}}"></my-element>
+2
source

Okay, sorry guys. I did not do my homework. Everything seems to work as I hoped, and data binding works fine. Here is a small example that I made to try to prove my point

 <!DOCTYPE html> <html> <head> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'> <meta name='mobile-web-app-capable' content='yes'> <meta name='apple-mobile-web-app-capable' content='yes'> <script src='bower_components/webcomponentsjs/webcomponents.js'></script> <link rel='import' href='bower_components/polymer/polymer.html'> </head> <body> <dom-module id='my-element'> <template> <div>In my element it is <div>{{aPropertyOfTypeBoolean}}</div></div> </template> </dom-module> <script> Polymer({ is: 'my-element', properties: { aPropertyOfTypeBoolean: { type: Boolean, value: false, } } }); </script> <dom-module id='main-page'> <template> <paper-button on-tap='tap'>Click me</paper-button> <my-element a-property-of-type-boolean='{{someBoolean}}'></my-element> <div>In main page it is <div>{{someBoolean}}</div></div> </template> </dom-module> <script> Polymer({ is: 'main-page', properties: { someBoolean: { type: Boolean, value: false } }, tap: function(){ this.someBoolean = !this.someBoolean; } }); </script> <main-page></main-page>

+1
source

Add $ to the end:

 <my-element a-property-of-type-boolean$='{{someBoolean}}'></my-element>
0
source

More articles:


All Articles