I have a scenario in which I would like to create dynamic elements templatethat will be used with Polymer dom-repeat.
My current prototype is as follows ( JSbin demo ):
var domRepeat = document.createElement('template', 'dom-repeat');
domRepeat.items = ['a', 'b', 'c'];
var div = domRepeat.content.ownerDocument.createElement('div');
div.innerHTML = '[[item]]';
domRepeat.content.appendChild(div);
document.body.appendChild(domRepeat);
Polymer.dom.flush();
However, this does not work properly. Exit:
[[item]]
[[item]]
[[item]]
but not:
a
b
c
Since it [[item]]prints 3 times, I think that it dom-repeatworks, but data binding does not.
Spinning the graph : but if I changed the example from dom-repeatto dom-bind, then data binding would work. Modified example inspired by this answer ( JSBin demo ):
var domBind = document.createElement('template', 'dom-bind');
domBind.item = 'Hello World!';
var div = domBind.content.ownerDocument.createElement('div');
div.innerHTML = '[[item]]';
domBind.content.appendChild(div);
document.body.appendChild(domBind);
Polymer.dom.flush();
The output Hello World!is as expected.
Any ideas on how to get the first example to work?