How to pass `false` to polymer component property from HTML element?

Question

Here is the HTML reference for the polymer element:

<widget-iconblock dataid="QueriesByMonth" bgcolor="cornflowerblue" commas="true" valuelabel="Queries" icon="search" units="m" gethistory="false" sparknum="24" showtable="true" showspark="false"></widget-iconblock>

As you can see both gethistory and showspark should be false but they keep evaluating to true as seen in the screenshot above. I'm assuming this is because I'm not passing a boolean properly. Thus, passing anything makes it non-false.

If I default all my boolean properties to false then pass any value things function as expected. How can I fix this so that I can pass a false value?

Here is the full code from the component:

   <script>
        Polymer({
            is: 'widget-iconblock',
            properties: {
                dataid: {
                    type: String
                },
                valtoday: {
                    type: String,
                    value: 'Loading'
                },
                icon: {
                    type: String,
                    value: 'user'
                },
                gethistory: {
                    type: Boolean,
                    value: false
                },
                units: {
                    type: String
                },
                labelmain: {
                    type: String,
                    value: function(v){
                        switch(v.units) {
                            case "m": return "This Month"; break;
                            case "d": return "Today"; break;
                            case "w": return "This Week"; break;
                            case "h": return "Last Hour"; break;
                        }
                    }
                },
                labelsecondary: {
                    type: String,
                    value: function(v){
                        switch(v.units) {
                            case "m": return "months"; break;
                            case "d": return "days"; break;
                            case "w": return "weeks"; break;
                            case "h": return "hours"; break;
                        }
                    }
                },
                valuelabel: {
                    type: String
                },
                total: {
                    type: String
                },
                sparks: {
                    type: Array,
                    value: function(){return []}
                },
                sparknum: {
                    type: Number
                },
                commas: {
                    type: Boolean,
                    value: false
                },
                showspark: {
                    type: Boolean,
                    value: false
                },
                showtable: {
                    type: Boolean,
                    value: true
                },
                isloading: {
                    type: Boolean,
                    value: true
                }
            },
            ready: function() {
                var self = this;
                var z = this.showspark;
                var x = this.gethistory;
                getHistory(self.dataid,self.gethistory); //if true gets full history, if false only gets last 1
                registerCallback(this.dataid, function (data) {
                    var today;
                    today = {};
                    today.Value = "";
                    today = data.data[0];
                    if (today.Value == null) {
                        //oops
                    } else {

                        var sparkLength = self.sparknum;

                        if (self.sparknum == 0 || self.sparknum > data.data.length) {
                            sparkLength = data.data.length;
                        }
                        self.valtoday = today.Value.toString();
                        if (self.commas) self.valtoday = self.valtoday.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                        var total = 0;
                        for (var i = sparkLength - 1;  i >= 0; i--) {
                            total += data.data[i].Value;
                            if (self.sparks.length >= sparkLength) self.sparks.shift();
                            self.push('sparks', data.data[i].Value);
                        }
                        if (self.commas) total = total.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                        self.total = total;

                        if (self.showspark) {
                            //noinspection JSUnresolvedVariable
                            var a = self.$.sline;
                            $(a).sparkline(self.sparks, {
                                type: "bar",
                                height: "20px",
                                "barColor":"#ffffff",
                                "width":"100%",
                                "zeroAxis":"false",
                                "barSpacing":"2"
                            });
                        } else {
                            alert('WTF');
                        }
                        self.isloading = false;
                    }
                });
            }
        });
    </script>

Completely irrelevant. I realized why it was working before. Previously, all my booleans defaulted to `false`. I think the problem is that passing *any* value from the HTML immediately makes the property "not false". So by saying `gethistory="false"` I'm making it not false. — , Oct 04 '16 at 14:41
Confirmed, `` still results in `this.showspark` being `true`. — , Oct 04 '16 at 14:46
you cannot pass false to boolean like this. writing a boolean name in tag makes it true no need to pass value — a1626, Oct 04 '16 at 14:47
[this] (https://www.polymer-project.org/1.0/docs/devguide/properties#configuring-boolean-properties) should help — a1626, Oct 04 '16 at 14:48
To anyone facing similar situation, you can try the answer I provided in https://stackoverflow.com/questions/60678891/how-can-i-change-a-boolean-property-in-lit-element-to-hide-content-on-my-compone/60686262#60686262 — Shashank Vivek, Mar 14 '20 at 18:57

score 3 · Accepted Answer · answered Oct 04 '16 at 14:55

3

You cannot pass false for a boolean property by using it as an attribute. This is default web platform behavior. So

<widget-iconblock gethistory="false"></widget-iconblock>

or

<widget-iconblock gethistory="false"></widget-iconblock>

for boolean property is actually interpreted as

<widget-iconblock gethistory></widget-iconblock>

which is equivalent to

<widget-iconblock gethistory="true"></widget-iconblock>

Here's the mention in Polymer's documentation for same

answered Oct 04 '16 at 14:55

a1626

2,953
1
19
34

To anyone facing similar situation, you can try the answer I provided in https://stackoverflow.com/questions/60678891/how-can-i-change-a-boolean-property-in-lit-element-to-hide-content-on-my-compone/60686262#60686262 – Shashank Vivek Mar 14 '20 at 18:57

score 2 · Answer 2 · answered Oct 04 '16 at 18:20

Actually the post by a1626 only partially answers the question. After all it is possible to design a Polymer element in such a way that you can make a property false manipulating only HTML.

To do that you need a boolean property which is reflected to attribute

Polymer({
  is: 'my-elem',
  properties: {
    someProp: {
      type: Boolean,
      value: true,
      reflectToAttribute: true
    }
  }
});

When the property is true, it will automatically add an attribute to its node

<my-elem some-prop></my-elem>

Now simply removing that attribute will change the property's value to false

document.querySelector('my-elem').removeAttribute('some-prop');

Maybe this solution can work for you. See the snippet below for a some live action.

Polymer({
  is: 'my-elem',
  properties: {
    someProp: {
      type: Boolean,
      value: true,
      reflectToAttribute: true
    }
  }
});

document.getElementById('makeFalse')
  .addEventListener('click', function() {
    document.querySelector('my-elem').removeAttribute('some-prop');
  });

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>
</head>

<body>
  <my-elem></my-elem>
  
  <input type="button"
         value="make false"
         id="makeFalse" />
  
  <dom-module id="my-elem">
    <template>
      [[someProp]]
    </template>
  </dom-module>

</body>
</html>

Interesting, but functionally, isn't this the same? It can only be false if the attribute is not included. — , Oct 04 '16 at 18:44
Yes, everything what a1626 writes is true. The property is true when the attribute exists and false otherwise. Though I find this a potentially viable way to *pass `false` to polymer component property from HTML element*. — Tomasz Pluskiewicz, Oct 04 '16 at 18:46
Provided you have a liberal understanding of the word _pass_ :) — Tomasz Pluskiewicz, Oct 04 '16 at 18:47

How to pass `false` to polymer component property from HTML element?

2 Answers2