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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
