0
私の目標は、ポリマーを使ってグリッドウェブコンポーネントを作成することです。このpostとは異なり、私は<column>要素内にユーザー<template>要素を入れたくありません。グリッドウェブコンポーネントの作成に悩まされている
<my-grid>
<my-delete-column></my-delete-column>
<my-column name="numero" title="Titre"></my-column>
...
</my-grid>
をそれぞれ異なる列（画像、ブール、アクション、カスタム、...）のためのさまざまなWebコンポーネントでは：私は私のhtmlファイルは次のように見えることしたいです。
私のグリッド要素では、（データソースに基づいて）メインリピータテンプレートに<content>要素を配置しました。しかし、1行しか作成されず、3列は最初のセルにあります。
何が問題なのですか？ここで
は、この小さなプロジェクトでのGitHubリポジトリである：ここでhttps://github.com/olofweb/wc-grid
は私の3つのファイルがある：
私-シンプル-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>
私-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>