卡在创建网格Web组件上

Question

我的目标是使用Polymer创建一个网格Web组件。 与本文不同的是，我不希望用户在<column>元素内使用<template> <column>元素。 我希望我的html文件如下所示：

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

每个不同的列都有一个不同的Web组件（图像，布尔值，操作，自定义...）。

因此，在我的grid元素中，我将一个<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

看来您没有在元素上使用数据绑定。 为了从数据属性检索信息，请尝试此：

<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 个解决方案

解决方案1
0 2017-03-02 15:11:59

卡在创建网格Web组件上

问题描述

1 个解决方案

解决方案1 0 2017-03-02 15:11:59

解决方案1
0 2017-03-02 15:11:59