Polymer 1.0 - injectBoundHTML() 替代方案答案

【问题标题】：Polymer 1.0 - injectBoundHTML() alternativePolymer 1.0 - injectBoundHTML() 替代方案
【发布时间】：2015-06-15 01:51:51
【问题描述】：

Polymer 1.0 与 injectBoundHTML() 等价的东西是什么？

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

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

编辑：还没有足够的可信度来接受我自己的答案，但它应该在下面的某个地方。 TL;DR - 使用“dom-bind”模板

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

尽管正如 techknowledgey 指出的那样，它还没有得到很好的支持。以下似乎可以解决问题。

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。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

虽然这确实绑定了“prop”，但它仍然将输出呈现为文字字符串，并且 html 中的任何绑定都不会被解析。 jsbin.com/woxato/edit?html,output

【解决方案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>

【讨论】：