Моя цель - создать сетчатый веб-компонент с помощью Polymer. В отличие от этого post, я не хочу, чтобы пользователь <template> элемент внутри моих <column> элементов. Я хочу, чтобы мой HTML-файл выглядит следующим образом:Застрял с созданием сетчатого веб-компонента
<my-grid>
<my-delete-column></my-delete-column>
<my-column name="numero" title="Titre"></my-column>
...
</my-grid>
С другой веб-компонента для каждого другого столбца (изображение, логическое значение, действие, изготовленный на заказ, ...).
Итак, в элементе сетки я поместил элемент <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>