聚合物1.0 - injectBoundHTML（）替代

function injectBoundHTML(html, element) { 
    var template = document.createElement('template', 'dom-bind'); 
    var doc = template.content.ownerDocument; 
    var div = doc.createElement('div'); 
    div.innerHTML = html; 
    template.content.appendChild(div); 
    while (element.firstChild) { 
     element.removeChild(element.firstChild); 
    } 
    element.appendChild(Polymer.Base.instanceTemplate(template)); 
}

如果你的HTML已经被解析过，那就用“doc.importNode（sourceNode，true）;”而不是获取/设置innerHTML。

来源

2015-07-09 14:24:58

感谢各位为我自己的需求更新的原型：在聚合物中生成标记，因为dom-repeat无法执行此操作。

标签的搜索引擎：聚合物的生成动态动态标记自定义元素DOM重复DOM重复应答器dynamique dynamiquement

http://jsbin.com/wiziyeteco/edit?html,output

<!doctype html> 
<html> 
<head> 
    <title>polymer</title> 
    <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script> 
    <link rel="import" href="http://polygit.org/components/paper-button/paper-button.html"> 
</head> 
<body>  
    <dom-module id="x-test"> 
    <template> 
     <div id="container"></div> 
    </template> 
    </dom-module> 
    <script>  
    Polymer({ 
     is: 'x-test', 
     ready: function() { 

     // Declare custom elements 
     var customElements = [ 
      {name:'paper-button', title:'A'}, 
      {name:'paper-button', title:'B'}, 
      {name:'paper-button', title:'C'}, 
      {name:'paper-button', title:'D'}, 
     ]; 

     // Declare auto-binding, as we are at the root HTML document 
     var domBind = document.createElement('template', 'dom-bind'); 
     domBind.customElements = customElements; 
     var domBindDocument = domBind.content.ownerDocument; 

     // Declare custom elements 
     for (var i in domBind.customElements) { 
      var item = domBind.customElements[i]; 
      var elem = domBindDocument.createElement(item.name);  
      elem.setAttribute('raised', 1); 
      elem.innerHTML = item.title;   
      domBind.content.appendChild(elem); 
     } 

     // Append to #container 
     this.$.container.appendChild(domBind); 
     } 
    }); 
    </script> 
    <x-test></x-test> 
</body> 
</html>

来源

2016-08-31 08:39:46

聚合物1.0 - injectBoundHTML（）替代

回答

相关问题