針對對象計算的聚合物

我在聚合物中有一個網絡組件，我正在做一些基本組件。我想做一個基本的表，在那裏我可以設置一個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>

我需要做一個計算的功能，因爲我想與dom-repeat到模板只是一個換td元素，所有油漆那裏得到的template的值，它是沒有必要的通過在th中逐個添加來修改模板。

我該怎麼做才能讓我計算的函數的返回值，並在td

來源

2016-04-06 AlvaroGlez

這應該工作（檢查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>

來源

2016-04-06 12:02:19

感謝烏米特都畫，可以完美運行！ – AlvaroGlez

針對對象計算的聚合物

回答

相關問題