Search code examples
polymerpolymer-1.0plunkeriron-data-tablepolymer-1.x

Polymer 1.x: How to pre-process the items in a list or repeater?


Here is the plunk.

Can anyone point me to a pattern that formats (or pre-processes) data items entering a repeater (like iron-list or iron-data-table) for example?

In other words, consider this plunk for example. Let's say I wanted to add a field to each user and display it in the list; let's call it namelength where:

item.user.namelength = item.user.name.first.length + item.user.name.last.length

How (where in the HTML or JS and using what pattern) would I best approach this pre-processing task?

content-el.html
<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>

<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-button/paper-button.html">

<link rel="import" href="iron-data-table/iron-data-table.html">

<dom-module id="content-el">
    <template>
        <style></style>

    <iron-ajax
      auto
      url="https://saulis.github.io/iron-data-table/demo/users.json" 
      last-response="{{users}}">
    </iron-ajax>
    <iron-data-table items="[[users.results]]">
      <data-table-column name="Picture" width="50px" flex="0">
        <template>
          <img src="[[item.user.picture.thumbnail]]">
        </template>
      </data-table-column>
      <data-table-column name="First Name">
        <template>[[item.user.name.first]]</template>
      </data-table-column>
      <data-table-column name="Last Name">
        <template>[[item.user.name.last]]</template>
      </data-table-column>
      <data-table-column name="Email">
        <template>[[item.user.email]]</template>
      </data-table-column>
    </iron-data-table>

    </template>

  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'content-el',
            });
        })();
  </script>
</dom-module>

Solution

  • E.g.

    <data-table-column name="Name Length">
        <template>{{_len(item.user.name.first, item.user.name.last)}}</template>
    </data-table-column>
    

    ...

    (function() {
      'use strict';
      Polymer({
        is: 'content-el',
        _len: function(first, last) {
          return first.length + last.length;
        }
            });
        })();