Question

以下是聚合物元素的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都应该是假的，但他们会继续评估true，如上面的屏幕截图所示。我假设这是因为我没有正确传递布尔值。因此，传递任何使其成为非假的。

如果我将所有布尔属性默认为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

您不能将false属性boolean用作attribute。这是默认的Web平台行为。所以

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

或

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

布尔属性的

实际上被解释为

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

相当于

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

Here's在Polymer的文档中提到相同的

Answer 2

实际上，a1626的帖子只能部分回答这个问题。毕竟，可以设计一个Polymer元素，这样你就可以使一个属性误操作HTML。

为此，您需要一个布尔属性reflected to attribute

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

当属性为true时，它会自动向其节点添加属性

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

现在只需删除该属性即可将属性的值更改为false

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

也许这个解决方案可以为您服务。请参阅下面的代码段，了解一些实时操作。

＆＃13;

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');
  });

＆＃13;

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

＆＃13;

如何从HTML元素传递`false`到聚合物组件属性？

2 个答案: