如何在Polymer 1.0中的html中修改布尔属性值？

Question

If I assign a boolean property to a component, how can I modify the value of the boolean in html, without creating any function in javascript?

For example, lets say I have the following component:

 Polymer({ is: 'find-retailer-map', properties: { fixedPosition: { type: Boolean, notify: true, }, }, }); 

 <dom-module id="osb-retailer-page"> <template> <find-retailer-map fixed-position></find-retailer-map> </template> </dom-module> 

How can I make fixed-position true or false within the html?

Thanks

Answer 1

Boolean properties works as normal boolean attrribute in HTML, example:

<input type="checkbox" checked />
<input type="text" disabled />

To swtich ON/OFF you need to do remove or add the attribute, then

• Switch on: <find-retailer-map fixed-position></find-retailer-map>
• Swtich off: <find-retailer-map></find-retailer-map>

To swtich ON/OFF programamtically:

• Switch on: <find-retailer-map fixed-position$="{{_your_toggle(true)}}"></find-retailer-map>
• Switch off: <find-retailer-map fixed-position$="{{_your_toggle(false)}}"></find-retailer-map>

hope that helps

Answer 2

Booleans in HTML and Polymer works the same. Either they are there (true), or they are not (false). These three are doing the same thing ...

<find-retailer-map fixed-position></find-retailer-map>
<find-retailer-map fixed-position="true"></find-retailer-map>
<find-retailer-map fixed-position="false"></find-retailer-map>

... as you can pass in anything in the fixed-position attribute to set it true. To set it false, however, you need to remove the attribute.

<find-retailer-map></find-retailer-map>

If you want to set the property dynamically, pass in a variable, as an attribute, from osb-retailer-page into find-retailer map.

<dom-module id="osb-retailer-page">
  <template>
    <find-retailer-map fixed-position="[[aVariableInRetailerPage]]"></find-retailer-map>
  </template>
</dom-module>

However, the default value for the fixedPosition property in find-retailer-map must be false (or not set, just like your example). You cannot change that property if it defaults to true.

Boolean properties are set based on the presence of the attribute: if the attribute exists at all, the property is set to true, regardless of the attribute value. If the attribute is absent, the property gets its default value. /.../ For a Boolean property to be configurable from markup, it must default to false. If it defaults to true, you cannot set it to false from markup, since the presence of the attribute, with or without a value, equates to true. This is the standard behavior for attributes in the web platform.

https://www.polymer-project.org/1.0/docs/devguide/properties