javascript - Simple Polymer 1.0 data table

Question

Welcome To Ask or Share your Answers For Others

javascript - Simple Polymer 1.0 data table

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I am trying to create a simple Polymer component that renders a table from an array of data. Example of the intended usage of said component would be the following:

<my-table data="{{someArray}}">
  <my-column header="Id"><template>{{item.id}}</template></my-column>
  <my-column header="Name"><template>{{item.name}}</template></my-column>
</my-table>

And the render should look like this:

However, upon creating a semi-working prototype, things get complicated. The prototype can be found here: http://jsbin.com/sirutusupu/edit?html,console,output. Disclaimer: it doesn't work unless you download it an run it through a local http-server.

My first question: why does the prototype only work via local http-server?

My second question: when running locally and when I wrap the custom element with a dom-bind, it also stops working. Local code (that is also not working):

<template is="dom-bind">
  <my-table>
    <my-column header="Id"><template>{{item.id}}</template></my-column>
    <my-column header="Name"><template>{{item.name}}</template></my-column>
  </my-table>
</template>

My third question: using functions to format output doesn't work. Consider this extended example:

<script>
  function concat(a, b) {
    return a + "-" + b;
  }
</script>
<my-table>
  <my-column header="Id"><template>{{item.id}}</template></my-column>
  <my-column header="Name"><template>{{item.name}}</template></my-column>
  <my-column header="Computed"><template>{{concat(item.id, item.name)}}</template></my-column>
</my-table>

The resulting error is polymer.html:1660 [undefined::_annotatedComputationEffect]: compute method 'concat' not defined.

Is there a way to get around this without defining Computed bindings? Otherwise the custom formatting of cell values is not possible.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

691 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T21:39:42+0000

You have an interesting construction here!

I don't know why it doesn't work for you in the jsbin, it might have something to do with rawgit, I used polygit instead.
Formatting will work if you put the computation function on the column's ctor.prototype after Templatizing.
dom.bind is going to mess up the interior template, I would avoid it.

This one seems to work:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>My table</title>      
  <base href="//polygit.org/components/">
  <link rel="import" href="polymer/polymer.html" >     
</head>
<body>
  <my-table>
    <my-column header="Id"><template>{{item.id}}</template></my-column>
    <my-column header="Name"><template>{{item.name}}</template></my-column>
    <my-column header="Computed"><template>{{concat(item.id, item.name)}}</template>
  </my-table>
  
  <dom-module id="my-table">
    <template>
      <table border="1">
        <tr>
          <template is="dom-repeat" items="{{columns}}" as="column">
            <th>{{column.header}}</th>
          </template>
        </tr>
        <template is="dom-repeat" items="{{items}}" as="row">
          <tr>
            <template is="dom-repeat" items="{{columns}}" as="column">
              <td>
                <my-cell column="{{column}}" row="{{row}}"></my-cell>
              </td>
            </template>
          </tr>
        </template>
      </table>
    </template>
  </dom-module>
  
  <script>
    Polymer({
      is: 'my-table',
      ready: function() {
        this.columns = Array.prototype.slice.call(Polymer.dom(this).querySelectorAll('my-column'));
        this.items = [
          {id: 1, name: 'John'},
          {id: 2, name: 'Jane'},
        ];
      }
    });

    Polymer({
      is: 'my-column',
      properties: {
        header: String
      },
      ready: function() {
        this.templatize(Polymer.dom(this).querySelector('template'));
        this.ctor.prototype.concat = function(id, name) {
          return name + '(' + id + ')';
        }
      },
      stampCell: function(row) {
        return this.stamp({item: row});
      },
      behaviors: [Polymer.Templatizer]
    });

    Polymer({
      is: 'my-cell',
      ready: function() {
        Polymer.dom(this).appendChild(this.column.stampCell(this.row).root);
      }
    });
  </script>    
</body>
</html>

Categories

javascript - Simple Polymer 1.0 data table

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags