卡在創建網格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