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

【问题标题】：Polymer 1.0 dynamic template with dom-repeat具有 dom-repeat 的 Polymer 1.0 动态模板
【发布时间】：2016-02-12 08:28:43
【问题描述】：

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

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

正如预期的那样，输出是Hello World!。

关于如何让第一个示例工作的任何想法？

【问题讨论】：

标签： javascript templates polymer polymer-1.0

【解决方案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/有帮助

【讨论】：

我知道模板化程序。我什至修改了股票dom-repeat 组件，以便代替this.templatize(this) 模板化一个即时创建的template。长话短说：它有点工作，但是当您使用dom-bind 绑定其他变量（在修改后的dom-repeat 范围之外）时会出现问题。似乎您还需要将外部范围链接到新模板。但我不知道怎么做。
我明白了。如前所述，我自己对此没有经验。这个问题看起来很相似stackoverflow.com/questions/31557807/… mabe 它包含一些你可以使用的想法。
感谢您的链接，但我已经看到了。我的问题中的第二个例子实际上是从那个答案中得到启发的。我已经更新了我的问题，以便它可以引用它。
我和iron-list 玩了一会儿，发现当你用动态创建的模板交换模板时，数据绑定开始只工作 用于标记变量（index、selected、tabIndex 和 item）。看起来在发生标记时已经评估了其他变量。