Polymer 1.0-injectBoundHTML（）替代方案_Polymer_Polymer 1.0

Polymer 1.0-injectBoundHTML（）替代方案

polymer

Polymer 1.0-injectBoundHTML（）替代方案,polymer,polymer-1.0,Polymer,Polymer 1.0,聚合物1.0与injectBoundHTML（）的等价物是什么（即，将HTML字符串附加到聚合元素内的节点，并具有数据绑定）一个JSbin示例- 编辑：还没有足够的信任来接受我自己的答案，但它应该在下面的某个地方。TL；DR-使用“dom绑定”模板默认情况下绑定到属性，连字符可用于表示大写：看看@kevinpschaaf的评论，这似乎还不是一个真正受支持的功能：使用dom绑定，我应该能够满足我的用例，例如，尽管正如TechKnowledge指出的，它还没有得到很好的支持。下面的内容似乎

聚合物1.0与injectBoundHTML（）的等价物是什么

（即，将HTML字符串附加到聚合元素内的节点，并具有数据绑定）

一个JSbin示例-

编辑：还没有足够的信任来接受我自己的答案，但它应该在下面的某个地方。TL；DR-使用“dom绑定”模板默认情况下绑定到属性，连字符可用于表示大写：

看看@kevinpschaaf的评论，这似乎还不是一个真正受支持的功能：

使用dom绑定，我应该能够满足我的用例，例如

，尽管正如TechKnowledge指出的，它还没有得到很好的支持。下面的内容似乎可以奏效

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。

感谢各位为我自己的需要更新了原型：在polymer中生成标记，因为dom repeat无法执行此操作

搜索引擎标签：聚合生成动态动态标记自定义元素dom repeat dom repeat应答器Dynamicque DynamicQuement


聚合物
聚合物({
是‘x-测试’，
就绪：函数（）{
//声明自定义元素
var customElements=[
{名称：'paper-button'，标题：'A'}，
{名称：'paper-button'，标题：'B'}，
{名称：'paper-button'，标题：'C'}，
{名称：'paper-button'，标题：'D'}，
];
//声明自动绑定，就像我们在根HTML文档中一样
var domBind=document.createElement（'template'，'domBind'）；
domBind.customElements=customElements；
var domBindDocument=domBind.content.ownerDocument；
//声明自定义元素
for（domBind.customElements中的变量i）{
var item=domBind.customElements[i]；
var elem=domBindDocument.createElement（item.name）；
元素setAttribute（'raised'，1）；
elem.innerHTML=item.title；
domBind.content.appendChild（elem）；
}
//附加到#容器
这个$.container.appendChild（domBind）；
}
});

虽然这确实绑定了“prop”，但它仍然将输出呈现为文本字符串，并且html中的任何绑定都不会解析。

<!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>