Question

我对聚合物完全不熟悉。我想绘制图表......

我有一个html，其中包含这样的属性...用于dom模块

<some-container content_content-type = 'Real Estate' content_content-num = 'PF HP 001078' key-type = 'vpn_key' graphmax = 620000 graphmin = 540000 currency = 'USD' oldvalue-amount = 550000 new-value-amount = 2300 new-valuecolor = 'green-text' new-valueplusminus = '+' morelink = '#' containerlink = 'education.html' graphdata = [['Tue', 600000],['Wed', 590000],['Thu', 580000],['Fri', 575000],['Sat', 590000],['Sun', 575000],['Mon', 550000],['Tue', null]]></some-container>

现在我想将此数组graphdata作为参数发送...因为我发送了其他内容，如... content_content-type，content_content-num等。

<dom-module id="some-container">
  <template>
….HTML…
  </template>
  <script>
    Polymer({        
           is: 'some-container',
           properties: {
                                content_contentType: {
                                                type:     String,
                                                notify: true
                                },
                                content_contentNum: {
                                                type:     String,
                                                notify: true
                                }, 
….
                                graphdata: {
                                                type: Array,
                                                value: []
                                },
….
};
                attached: function() {
                                                this._drawgraph(this.graphmax,this.graphmin,this.graphid,this.graphdata); //  _drawgraph is some other function where functionality/calculations are…
                                //If I debug I see this.graphmax, this.graphmin has data… but not this.graphdata
                                },

但是我看到this.graphdata没有获取数据。它未定义。

有任何建议如何从外部HTML传递数组

Answer 1

要直接在HTML中将引用的[JSON | Array]传递给element属性，您必须反转引号。属性值必须用单引号括起来，实际字符串必须使用双引号。否则Polymer无法解析它，因为单引号不是正确的JSON语法。因此，您的代码应该是

<some-container graphdata='[["Tue", 600000],["Wed", 590000],["Thu", 580000],["Fri", 575000],["Sat", 590000],["Sun", 575000],["Mon", 550000],["Tue", null]]'></some-container>

Answer 2

它的解析方式似乎被Polymer视为JSON，因此您必须始终对数组属性使用单引号，并在数组中使用双引号。

这是一个工作示例，在StackOverflow上运行似乎有点慢，但它应该会在几秒钟后运行。

<!doctype html>

<html>
  <head>
    <title>Testing App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="http://polygit.org/polymer+:master/components/polymer/polymer.html">
  </head>
  <body>

    <dom-module id="example-element">
      <template>
        <template is="dom-repeat" items="[[_processArray(graphdata)]]">
          <p>[[item.key]]: [[item.value]]</p>
        </template>
      </template>
      <script>
        Polymer({
          is: 'example-element',

          properties: {

            graphdata: {
              type: Array
            }
          },

          _processArray(arr) {
            var processed = [];
            for (var i = 0; i < arr.length; i++) {
              processed.push({
                key: arr[i][0],
                value: arr[i][1]
              });
            }
            return processed;
          }
        });
      </script>
    </dom-module>
        
    <example-element graphdata='[["Tue", 600000],["Wed", 590000],["Thu", 580000],["Fri", 575000],["Sat", 590000],["Sun", 575000],["Mon", 550000],["Tue", null]]'></example-element>

  </body>
</html>

如何将数组传递给聚合物中的内部html

2 个答案: