聚合物1.0-injectBoundHTML()替代

问题描述

Polymer 1.0等同于injectBoundHTML()?

What's the Polymer 1.0 equivalent to injectBoundHTML()?

(即，将HTML字符串附加到Polymer元素内的节点上，并解析数据绑定)

(i.e. appending HTML strings to nodes within a Polymer element and having data bindings resolve)

一个JSbin示例-http://jsbin.com/jufase/edit?html，输出

A JSbin example - http://jsbin.com/jufase/edit?html,output

还没有足够的信誉来接受我自己的答案，但是它应该低于某个地方. TL; DR-使用"dom-bind"模板

don't have enough SO cred to accept my own answer yet, but it should be down below somewhere. TL;DR - use "dom-bind" templates

推荐答案

尽管正如技术知识所指出的那样，它并没有得到很好的支持.以下似乎可以解决问题.

Although as techknowledgey pointed out it's not really supported well yet. The following seems to do the trick.

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.

If your HTML was already parsed then use something like "doc.importNode(sourceNode, true);" instead of getting/setting innerHTML.

这篇关于聚合物1.0-injectBoundHTML()替代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！