我正在尝试创建一个简单的 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>
渲染应该是这样的:
但是，在创建半成品原型(prototype)后，事情就变得复杂了。原型(prototype)可以在这里找到:http://jsbin.com/sirutusupu/edit?html,console,output . 免责声明:除非您下载它并通过本地http-server 运行它，否则它不会工作。
我的第一个问题:为什么原型(prototype)只能通过本地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>
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>
产生的错误是 polymer.html:1660 [undefined::_annotatedComputationEffect]: compute method 'concat' not defined。
有没有办法在不定义 Computed 绑定(bind)的情况下解决这个问题？否则单元格值的自定义格式是不可能的。
最佳答案
你这里有一个有趣的结构!
- 我不知道为什么它在 jsbin 中对你不起作用，它可能有
与
rawgit有关，我用polygit代替。 - 如果将计算函数放在
模板化后列的
ctor.prototype。 dom.bind会弄乱内部template，我会避免
这个似乎有效:
<!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>关于javascript - Simple Polymer 1.0数据表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35343213/