具有dom-repeat的Polymer 1.0动态模板 [英] Polymer 1.0 dynamic template with dom-repeat
问题描述
我有一个场景,我想创建动态的template
元素,这些元素将与Polymer的dom-repeat
一起使用.
I have a scenario where I would like to create dynamic template
elements that will be used with Polymer's dom-repeat
.
我当前的原型如下( JSbin演示):
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]]
而不是:
a
b
c
由于[[item]]
被打印了3次,所以我猜dom-repeat
本身可以工作,但是数据绑定无效.
Since the [[item]]
is printed out 3 times, I guess the dom-repeat
itself works, but the data binding does not.
绘制扭曲:但是,如果我将示例从dom-repeat
更改为dom-bind
,则数据绑定确实有效.更改示例,受此答案(
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();
按预期,输出为Hello World!
.
关于如何使第一个示例生效的任何想法?
Any ideas on how to get the first example to work?
推荐答案
在动态创建的HTML中绑定当前并不那么容易.我认为最终有计划会对此提供更好的支持.
Binding in dynamically created HTML isn't that easy currently. I think there are plans to support this better eventually.
同时,模板程序应允许实现这种情况. 我自己没有使用过它,也没有找到代码示例. 铁清单和dom-if,dom-bind,dom-repeat似乎都在使用它,这可能用作自定义实现的模板.
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/聚合物/blob/master/src/lib/template/templatizer.html
这可能会帮助 http://t-code.pl/blog/2015/08/polymer-templatizer/
这篇关于具有dom-repeat的Polymer 1.0动态模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!