具有dom-repeat的Polymer 1.0动态模板

时间:2016-02-12 08:28:43

标签: javascript templates polymer polymer-1.0

我有一个场景,我想创建将与Polymer template一起使用的动态dom-repeat元素。

我目前的原型如下(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();

然而,这不按预期工作。输出是:

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

而不是:

a
b
c

由于[[item]]被打印出3次,我猜dom-repeat本身有效,但数据绑定没有。

情节扭曲:但如果我将示例从dom-repeat更改为dom-bind,则数据绑定工作。更改示例,受this answerJSBin 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();

输出为Hello World!,正如所料。

关于如何让第一个例子起作用的任何想法?

1 个答案:

答案 0 :(得分:3)

动态创建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/