Simple Polymer 1.0 Datasheet

Question

Simple Polymer 1.0 Datasheet

I am trying to create a simple Polymer component that displays a table from an array of data. An example of the intended use of the specified component will be as follows:

<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, when creating a semi-working prototype, everything becomes complicated. The prototype can be found here: http://jsbin.com/sirutusupu/edit?html,console,output . Disclaimer : It does not work unless you download it through local http-server.

My first question is : why does the prototype only work through the local one http-server?

: dom-bind . ( ):

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

: . :

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

polymer.html:1660 [undefined::_annotatedComputationEffect]: compute method 'concat' not defined.

? .

+1

javascript html templates polymer polymer-1.0

alesc 11 . '16 15:21

3

, : columns. properties

:

Polymer({
  is: 'my-table',
  properties: {
    items: Array,
    columns: {
      type: Array,
      value: function(){return [];}
    }

  },
  ready: function() {
    this.columns = Polymer.dom(this).querySelectorAll('my-column');

    this.items = [
      {id: 1, name: 'John'},
      {id: 2, name: 'Jane'},
    ];
  },
});

<template> <template is="dom-bind">, . , .

http-, ?. , , hrefs, ../polymer/polymer.html. , Polymer (, polyserve web-component-tester), bower_components , ../. http- -, ? - (, apache ngnix), , URL- , .

jsbin

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

<my-table> <content>, , . , - , <my-table> .

0

akc42 11 . '16 19:39

№2 ( , dom-bind) . , Templatizer:

_forwardParentProp: function(prop, value)
_forwardParentPath: function(path, value)
_showHideChildren: function(shouldHide)

_instanceProps .

0

alesc 15 . '16 11:41

Scott Miles · Accepted Answer · 2016-02-12T18:11:21+0000

!

, jsbin, - rawgit, polygit.
, ctor.prototype Templatizing.
dom.bind template, .

, :

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

Hide result

Simple Polymer 1.0 Datasheet

More articles: