聚合物1.0帶dom-repeat的動態模板

我有一個場景，我想要創建動態template元素，它將與Polymer的dom-repeat一起使用。聚合物1.0帶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 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!，如所預期。

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

來源

2016-02-12 alesc

動態創建的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/

來源

2016-02-12 09:04:10

我知道Templatizer的。我甚至修改了股票'dom-repeat'組件，以便代替'this.templatize（this）'它模板化一個即時創建的'template'。長話短說：它有用，但當你使用'dom-bind'來綁定其他變量（在修改後的'dom-repeat'範圍之外）時會遇到問題。看起來你也需要將外部範圍鏈接到新模板。但我不知道如何。 – alesc

我明白了。如上所述，我自己沒有經驗。這個問題似乎相似http://stackoverflow.com/questions/31557807/can-dynamically-created-local-light-dom-in-polymer-be-processed-to-ensure-correc mabe它包含一些你可以使用的想法。 –

感謝您的鏈接，但我已經看到了。我的問題中的第二個例子實際上是從這個答案中得到啓發。我已經更新了我的問題，以便它有一個參考。 – alesc

聚合物1.0帶dom-repeat的動態模板

回答

相關問題