Question

Polymer 1.0相当于injectBoundHTML（）是什么？

（即将HTML字符串附加到Polymer元素中的节点并解析数据绑定）

JSbin示例 - http://jsbin.com/jufase/edit?html,output

编辑：没有足够的SO信用来接受我自己的答案，但它应该低于某个地方。 TL; DR - 使用＆＃34; dom-bind＆＃34;模板

Answer 1

虽然科技知识指出它尚未得到很好的支持。以下似乎可以解决问题。

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。

Answer 2

看起来这还不是真正受支持的功能，看看@kevinpschaaf的评论： https://github.com/Polymer/polymer/issues/1778

使用dom-bind，我应该能够满足我的用例，例如： http://jsbin.com/caxelo/edit?html,output

Answer 3

默认情况下，绑定属于属性，连字符可用于表示大写：

<element inner-h-t-m-l="{{prop}}"></element>

Answer 4

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

搜索引擎的标签： Polymer Generation动态动态标记自定义元素dom-repeat dom repeat balise 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>

Polymer 1.0 - injectBoundHTML（）替代方案

4 个答案: