3

I have a scenario where I would like to create dynamic template elements that will be used with Polymer's dom-repeat.

My current prototype is the following (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 as intended. The output is:

[[item]]
[[item]]
[[item]]

rather than:

a
b
c

Since the [[item]] is printed out 3 times, I guess the dom-repeat itself works, but the data binding does not.

Plot twist: but if I change the example from dom-repeat to dom-bind, then the data binding does work. Changed 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 is Hello World!, as expected.

Any ideas on how to get the first example to work?

Community
  • 1
  • 1
alesc
  • 2,776
  • 3
  • 27
  • 45

1 Answers1

3

Binding in dynamically created HTML isn't that easy currently. I think there are plans to support this better eventually.

In the meantime Templatizer should allow to implement such a scenario. I haven't used it myself and haven't found code examples. iron-list and dom-if, dom-bind, dom-repeat seem to make use of it which might work as template for custom implementations.

https://github.com/Polymer/polymer/blob/master/src/lib/template/templatizer.html

This might help http://t-code.pl/blog/2015/08/polymer-templatizer/

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    I am aware of the Templatizer. I have even modified the stock `dom-repeat` component so that instead of `this.templatize(this)` it templatizes an on-the-fly created `template`. Long story short: it kind of works, but has problems when you use `dom-bind` to bind other variables (that are outside of the scope of the modified `dom-repeat`). Seems like you also need to link the outside scope to the new template. But I have no idea how. – alesc Feb 12 '16 at 09:10
  • 1
    I see. As mentioned I have no experience with this myself. This question seems similar http://stackoverflow.com/questions/31557807/can-dynamically-created-local-light-dom-in-polymer-be-processed-to-ensure-correc mabe it contains some ideas you can use. – Günter Zöchbauer Feb 12 '16 at 09:12
  • Thanks for the link, but I have already seen that. The second example in my question is actually inspired from that answer. I have updated my question so that it has a reference to it. – alesc Feb 12 '16 at 09:18
  • 1
    I've been playing a bit with `iron-list` and found out that when you swap the template with an on-the-fly created one, the data binding starts working *only* for stamped variables (index, selected, tabIndex, and item). Looks like other variables are already evaluated when stamping occurs. – alesc Feb 12 '16 at 14:34