具有dom-repeat的Polymer 1.0動態模板

Question

我有一個場景，我想創建將與Polymer的dom-repeat一起使用的動態template元素。

我目前的原型是以下（ JSbin演示 ）：

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();

但是 ，這不符合預期。 輸出是：

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

而不是：

a
b
c

由於[[item]]打印出3次，我猜dom-repeat本身有效，但數據綁定沒有。

情節扭曲 ：但如果我將示例從dom-repeat更改為dom-bind ，那么數據綁定確實有效。 改變了示例，靈感來自這個答案 （ JSBin演示 ）：

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();

輸出是Hello World! 正如預期的那樣。

關於如何讓第一個例子起作用的任何想法？

Answer 1

動態創建HTML中的綁定目前並不容易。 我認為最終有計划更好地支持這一點。

與此同時，Templatizer應該允許實現這樣的場景。 我自己沒有使用它，也沒有找到代碼示例。 iron-list和dom-if，dom-bind，dom-repeat似乎使用它可能作為自定義實現的模板。

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

這可能會有所幫助http://t-code.pl/blog/2015/08/polymer-templatizer/