与创建网格Web组件卡住

我的目标是创建一个网格Web组件与聚合物。与此post不同，我不希望用户<template>元素位于我的<column>元素内。我想，我的HTML文件看起来像这样：与创建网格Web组件卡住

<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

这里是我的三个文件：

我-简单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>

我-简单 - 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>

来源

2017-02-19 Olof

它看起来像你没有在你的元素上使用data-binding。为了检索数据属性信息，试试这个：

<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中并遍历数据。

来源

2017-03-02 15:11:59

与创建网格Web组件卡住

回答

相关问题