为对象计算的聚合物

Polymer computed for an object

本文关键字：聚合物 计算 对象      更新时间：2024-02-02

我在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中的值，模板只有一个changer td元素，所有元素都在那里绘制，并且没有必要像th中那样通过逐个添加来修改模板。

如何使计算的函数返回值并绘制在td 中

这应该可以工作（检查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>

相关文章：