Scott Scott - 2 months ago 19
Javascript Question

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

enter image description here

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>

Answer

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