0
목표는 Polymer를 사용하여 그리드 웹 컴포넌트를 생성하는 것입니다. 이 post과 달리 사용자 <template>이 내 <column> 요소 안에 있지 않기를 바랍니다.그리드 웹 컴포넌트 생성을 고집했습니다.
<my-grid>
<my-delete-column></my-delete-column>
<my-column name="numero" title="Titre"></my-column>
...
</my-grid>
를 각각 다른 열 (이미지, 부울, 액션, 사용자 정의, ...)에 대해 다른 웹 구성 요소를 사용 : 내 html 파일은 다음과 같이 있다고합니다.
그리드 요소에서 데이터 소스를 기반으로 기본 repeater 템플릿에 <content> 요소를 넣었습니다. 하지만 한 줄만 만들어지고 세 칸은 첫 번째 칸에 있습니다 ...
뭐가 잘못 됐나요? 여기 https://github.com/olofweb/wc-grid
내 세 개의 파일은 다음과 같습니다 : 여기
이 작은 프로젝트와 Github의 저장소입니다내-간단한 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>