javascript - 如何从 HTML 元素将 `false` 传递给 polymer 组件属性？

Question

以下是 polymer 元素的 HTML 引用:

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

如您所见，gethistory 和 showspark 都应该为 false，但它们不断评估为 true，如上面的屏幕截图所示。我假设这是因为我没有正确传递 bool 值。因此，传递任何东西都会使其成为非错误。

如果我将所有 bool 属性默认为 false，则传递任何值，事情会按预期运行。如何解决此问题以便传递错误值？

以下是该组件的完整代码:

   <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 1

您无法通过将 boolean 属性用作 attribute 来传递 false。这是默认的 Web 平台行为。所以

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

或

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

对于 bool 属性实际上解释为

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

相当于

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

Here's Polymer 的文档中也提到了