简单聚合物1.0数据表 [英] Simple Polymer 1.0 data table
问题描述
我正在尝试创建一个简单的Polymer组件，用于从一组数据中呈现表。该组件的预期用法示例如下：
< my-table data ={{someArray}} >
< my-column header =Id>< template> {{item.id}}< / template>< / my-column>
< my-column header =Name>< template> {{item.name}}< / template>< / my-column>
< / my-table>
渲染看起来应该是这样的：
原型可以在这里找到： http://jsbin.com/sirutusupu/edit?html ，控制台，输出。 免责声明：它不起作用，除非您通过本地 http-server 运行它。
我的第一个问题：为什么原型只能通过本地 http-server ？
我的第二个问题：当我在本地运行时，当我用 dom-bind 包装自定义元素时，它也停止加工。本地代码（也不起作用）：
< template is =dom-bind>
< my-table>
< my-column header =Id>< template> {{item.id}}< / template>< / my-column>
< my-column header =Name>< template> {{item.name}}< / template>< / my-column>
< / my-table>
< / template>
我的第三个问题：使用函数格式化输出不起作用。考虑这个扩展的例子：
< script>
函数concat（a，b）{
return a + - + b;
}
< / script>
< my-table>
< my-column header =Id>< template> {{item.id}}< / template>< / my-column>
< my-column header =Name>< template> {{item.name}}< / template>< / my-column>
< my-column header =Computed>< template> {{concat（item.id，item.name）}}< / template>< / my-column>
< / my-table>
产生的错误是 polymer.html：1660 [undefined :: _ annotatedComputationEffect] ：compute method'concat'not defined 。
有没有办法在没有定义Computed绑定的情况下解决这个问题？否则，单元格值的自定义格式化是不可能的。
这里有一个有趣的构造！
- 我不知道为什么它在jsbin中不适用于您，它可能与
有关rawgit，我使用了polygit。 - 在Templatizing之后
列的ctor.prototype的计算函数。
-
dom.bind将会弄乱内部模板，我会避免
它。
这个似乎有效：
I am trying to create a simple Polymer component that renders a table from an array of data. Example of the intended usage of said component would be the following:
<my-table data="{{someArray}}">
<my-column header="Id"><template>{{item.id}}</template></my-column>
<my-column header="Name"><template>{{item.name}}</template></my-column>
</my-table>
And the render should look like this:
However, upon creating a semi-working prototype, things get complicated. The prototype can be found here: http://jsbin.com/sirutusupu/edit?html,console,output. Disclaimer: it doesn't work unless you download it an run it through a local http-server.
My first question: why does the prototype only work via local http-server?
My second question: when running locally and when I wrap the custom element with a dom-bind, it also stops working. Local code (that is also not working):
<template is="dom-bind">
<my-table>
<my-column header="Id"><template>{{item.id}}</template></my-column>
<my-column header="Name"><template>{{item.name}}</template></my-column>
</my-table>
</template>
My third question: using functions to format output doesn't work. Consider this extended example:
<script>
function concat(a, b) {
return a + "-" + b;
}
</script>
<my-table>
<my-column header="Id"><template>{{item.id}}</template></my-column>
<my-column header="Name"><template>{{item.name}}</template></my-column>
<my-column header="Computed"><template>{{concat(item.id, item.name)}}</template></my-column>
</my-table>
The resulting error is polymer.html:1660 [undefined::_annotatedComputationEffect]: compute method 'concat' not defined.
Is there a way to get around this without defining Computed bindings? Otherwise the custom formatting of cell values is not possible.
You have an interesting construction here!
- I don't know why it doesn't work for you in the jsbin, it might have
something to do with
rawgit, I usedpolygitinstead. - Formatting will work if you put the computation function on the
column's
ctor.prototypeafter Templatizing. dom.bindis going to mess up the interiortemplate, I would avoid it.
This one seems to work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My table</title>
<base href="//polygit.org/components/">
<link rel="import" href="polymer/polymer.html" >
</head>
<body>
<my-table>
<my-column header="Id"><template>{{item.id}}</template></my-column>
<my-column header="Name"><template>{{item.name}}</template></my-column>
<my-column header="Computed"><template>{{concat(item.id, item.name)}}</template>
</my-table>
<dom-module id="my-table">
<template>
<table border="1">
<tr>
<template is="dom-repeat" items="{{columns}}" as="column">
<th>{{column.header}}</th>
</template>
</tr>
<template is="dom-repeat" items="{{items}}" as="row">
<tr>
<template is="dom-repeat" items="{{columns}}" as="column">
<td>
<my-cell column="{{column}}" row="{{row}}"></my-cell>
</td>
</template>
</tr>
</template>
</table>
</template>
</dom-module>
<script>
Polymer({
is: 'my-table',
ready: function() {
this.columns = Array.prototype.slice.call(Polymer.dom(this).querySelectorAll('my-column'));
this.items = [
{id: 1, name: 'John'},
{id: 2, name: 'Jane'},
];
}
});
Polymer({
is: 'my-column',
properties: {
header: String
},
ready: function() {
this.templatize(Polymer.dom(this).querySelector('template'));
this.ctor.prototype.concat = function(id, name) {
return name + '(' + id + ')';
}
},
stampCell: function(row) {
return this.stamp({item: row});
},
behaviors: [Polymer.Templatizer]
});
Polymer({
is: 'my-cell',
ready: function() {
Polymer.dom(this).appendChild(this.column.stampCell(this.row).root);
}
});
</script>
</body>
</html>
这篇关于简单聚合物1.0数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![原型可以在这里找到：](\"https://i.stack.imgur.com/J6zlL.png\"){kind=link}