为对象计算的聚合物答案

【问题标题】：Polymer computed for an object为对象计算的聚合物
【发布时间】：2016-07-26 15:00:15
【问题描述】：

我在 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

【问题讨论】：

标签： javascript json polymer

【解决方案1】：

这应该可以工作（检查jsbin）

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

【讨论】：