It would be super cool to bind to an element name like this, but it's not possible. Polymer's internal Node.bind()
library needs a property, TextNode, etc. to bind to. In the case of <field-{{dataField.type}}>
, the {{}}
is meaningless, as there's nothing to latch on to.
One way you can achieve what you want is to use conditional templates:
<template repeat="{{dataField in dataFields}}">
<template if="{{dataField.type == 'text'}}">
<field-text></field-text>
</template>
<template if="{{dataField.type == 'chart'}}">
<field-chart></field-chart>
</template>
</template>
http://jsbin.com/yuqinoxa/1/edit
Even better would be to create a generic element, and give it a type
attribute to bind to:
<template repeat="{{dataField in dataFields}}">
<field-element type="{{dataField.type}}"></field-element>
</template>