Question

我的目标是使用Polymer创建网格Web组件。与此post不同，我不希望在<template>元素中包含用户<column>元素。我希望我的html文件看起来像这样：

<my-grid>
    <my-delete-column></my-delete-column>
    <my-column name="numero" title="Titre"></my-column>
    ...
</my-grid>

为每个不同的列使用不同的Web组件（图像，布尔，动作，自定义......）。

因此，在我的网格元素中，我将<content>元素放入主转发器模板（基于数据源）。但是只创建了一行，我的三列在第一个单元格中......

有什么问题？

这是一个包含这个小项目的Github存储库：https://github.com/olofweb/wc-grid

以下是我的三个文件：

my-simple-grid.comp.html：

<link rel="import"  href="/node_modules/Polymer/polymer.html">
<dom-module id="my-simple-grid">
    <style>
        th {
            text-align: left;
        }
        div {
            font-family: 'segoe ui', arial, sans-serif;
        }
    </style>

    <template>
        <div>
            <table>
                <thead>
                    <tr>
                        <template is="dom-repeat" items={{columns}} as="column">
                            <th>{{column.title}}</th>
                        </template>
                    </tr>
                </thead>
                <tbody>
                    <template id="mySimpleGridContent" is="dom-repeat" items="{{dataSource}}" as="row">
                        <tr>
                            <content></content>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </template>

  <script>
    Polymer({
      is: "my-simple-grid",
      properties: {
          dataSource: {
              type: Array,
              value: []
          },
          columns: {
              type: Array,
              value: []
          }
      },
      attached: function() {
        this.set('columns', this.getContentChildren());
      }
    });
  </script>
</dom-module>

my-simple-column.comp.html：

<link rel="import"  href="/node_modules/Polymer/polymer.html">

<dom-module id="my-simple-column">
    <style>
        div {
            font-family: 'segoe ui', arial, sans-serif;
        }
    </style>

    <template>
        <span>Column content !!!</span>
    </template>

    <script>
        Polymer({
            is: "my-simple-column",
            properties: {
                name: String,
                title: String
            },
            // événements du cycle de vie
            ready: function() {
            }
        });
    </script>
</dom-module>

index.html：

<!DOCTYPE html>
<html lang="fr">
  <head>
      <meta charset="utf-8">
    <script src="./node_modules/webcomponents.js/webcomponents-lite.js"></script>
    <link rel="import" href="./build/polymer-es5/my-simple-grid/my-simple-grid.comp.html">
    <link rel="import" href="./build/polymer-es5/my-simple-grid/my-simple-column.comp.html">
  </head>
  <body>
    <my-simple-grid id="mainGrid">
        <my-simple-column name="numero" title="Numéro"></my-simple-column>
        <my-simple-column name="nom" title="Nom"></my-simple-column>
        <my-simple-column name="prenom" title="Prénom"></my-simple-column>
    </my-simple-grid>
    <script>
        // window.addEventListener('WebComponentsReady', function(e) {
            var data = [
                {
                    numero: 12345,
                    nom: "Garnier",
                    prenom: "Francis",
                    sexe: "M"
                },
                {
                    numero: 12346,
                    nom: "Garnier",
                    prenom: "Sylvie",
                    sexe: "F"
                }
            ];

            document.querySelector('#mainGrid').dataSource = data;
        // });
      </script>
  </body>
</html>

Answer 1

您似乎未在元素上使用data-binding。要从 data 属性中检索信息，请尝试以下操作：

<my-simple-grid id="mainGrid">
    <my-simple-column name="{{data.0.numero}}" title="Numéro"></my-simple-column>
    <my-simple-column name="{{data.0.nom}}" title="Nom"></my-simple-column>
    <my-simple-column name="{{data.0.prenom}}" title="Prénom"></my-simple-column>
</my-simple-grid>

当然这只是为了验证它是否有效。您以后想要将<my-simple-grid>项目包装在dom-repeat中并重复数据。

坚持创建网格Web组件

1 个答案: