Question

我在Polymer中有一个web组件，我正在做一些基本组件。我想做一个基本的表，我可以在其中设置JSON，并使用这些数据打印表。

目前，我已准备好“json”进行探测。

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="table-custom">
    <template>
        <style>
        .table {
            border: 1px solid;
        }
        </style>
        <iron-ajax auto url="../data.json" last-responde="{{data}}" handle-as="json">
        </iron-ajax>
        <table class="table">
            <tr class="rows">
                <template is="dom-repeat" items="{{dataContent.titles}}">
                    <th> {{item.name}}</th>
                    <th> {{item.surName}}</th>
                    <th>{{item.lastName}}</th>
                </template>
            </tr>
            <template is="dom-repeat" items="{{dataContent.contents}}">
                <tr>
                  <template is="dom-repeat" items="{{valuesContent}}">
                    <td>{{item}}</td>
                  </template>
                </tr>
            </template>
        </table>
    </template>
    <script>
    Polymer({
        is: 'table-custom',
        ready: function() {
            this.dataContent = {
                contents: [{
                    name: 'Juan',
                    surname: 'Garrafaeustaquio',
                    lastname: 'Sin gas'
                }, {
                    name: 'Paco',
                    surname: 'Lindort',
                    lastname: 'chocolate'
                }, {
                    name: 'Pepe',
                    surname: 'Pilot',
                    lastname: 'no ve'
                }],
                titles: [{
                    name: 'Name',
                    surName: 'Surname',
                    lastName: 'Lastname',
                    age: 'Edad'
                }]
            };
        },
        properties: {
          valuesContent: {
            type: Object,
            computed: 'computedValuesContent(dataContent)'
          }
        },

        computedValuesContent: function(dataContent) {
          var myArray = dataContent.contents;
          myArray.forEach(function(content) {
            
          });
        }

    });
    </script>
</dom-module>

我需要做一个计算函数，因为我希望template中带有dom-repeat的值到模板只有一个转换器td元素并且所有画在那里，它是无需像th中一样逐一添加来修改模板。

如何使我成为计算函数返回值并在td

中绘制

Answer 1

这应该有效（查看jsbin）

＆＃13;

<!doctype html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <dom-module id="table-custom">
    <template>
       <style>
        .table {
            border: 1px solid;
        }
        </style>
      <table class="table">
            <tr class="rows">
                <template is="dom-repeat" items="{{dataContent.titles}}">
                    <th>{{item.name}}</th>
                    <th>{{item.surName}}</th>
                    <th>{{item.lastName}}</th>
                </template>
            </tr>
            <template is="dom-repeat" items="{{dataContent.contents}}">
                <tr>
                  <template is="dom-repeat" items="{{computedValuesContent(item)}}">
                    <td>{{item}}</td>
                  </template>
                </tr>
            </template>
        </table>
    </template>

    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'table-custom',
        ready: function() {
            this.dataContent = {
                contents: [{
                    name: 'Juan',
                    surname: 'Garrafaeustaquio',
                    lastname: 'Sin gas'
                }, {
                    name: 'Paco',
                    surname: 'Lindort',
                    lastname: 'chocolate'
                }, {
                    name: 'Pepe',
                    surname: 'Pilot',
                    lastname: 'no ve'
                }],
                titles: [{
                    name: 'Name',
                    surName: 'Surname',
                    lastName: 'Lastname',
                    age: 'Edad'
                }]
            };
        },
        computedValuesContent: function(dataContent) {
          var values= [];
          for (key in dataContent) {
            values.push(dataContent[key]);
          }
          return values;
        }
        });
      });
    </script>
  </dom-module>

  <table-custom></table-custom>
</body>
</html>

＆＃13;

为对象计算的聚合物

1 个答案: