javascript 如何将 HTML 注入带有聚合物的模板中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22199662/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to inject HTML into a template with polymer
提问by Tachun Lin
I'm using polymer-jsonp to perform JSONP requests, but the response sometimes contains html.
我正在使用聚合物 jsonp 来执行 JSONP 请求，但响应有时包含 html。
For example, supposing that post.content is "<strong>Foo</strong> bar", how can I display {{post.content}} such that "Foo"is in bold?
例如，假设 post.content 是"<strong>Foo</strong> bar"，我如何"Foo"以粗体显示 {{post.content}} ？
<polymer-element name="feed-element" attributes="">
<template>
<template repeat="{{post in posts.feed.entry}}">
<p>{{post.content}}</p>
</template>
<polymer-jsonp url="url" response="{{posts}}"></polymer-jsonp>
</template>
<script>
Polymer('feed-element', {
created: function() { },
attached: function() { },
detached: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
采纳答案by Scott Miles
Polymer will not stamp unescaped HTML via data-binding because it becomes a vulnerability for XSS attacks.
Polymer 不会通过数据绑定标记未转义的 HTML，因为它会成为 XSS 攻击的漏洞。
There are talks ongoing about making it possible to stamp HTML under limited circumstance, or to allow for customized filtering, but this is not implemented yet at the data layer.
目前正在讨论如何在有限的情况下标记 HTML，或者允许自定义过滤，但这还没有在数据层实现。
It is possible to do what you want today using an additional custom element, but again, be advised of the potential for bad things to happen if you render untrusted HTML into your page.
今天可以使用额外的自定义元素来做您想做的事情，但再次提醒您，如果您将不受信任的 HTML 呈现到您的页面中，可能会发生不好的事情。
Here is an example that shows this technique:
下面是一个展示这种技术的例子：
回答by wener
For those look for polymer 1.0
对于那些寻找聚合物 1.0 的人
<dom-module id="html-echo">
<style>
:host {
display: block;
}
</style>
<template>
</template>
</dom-module>
<script>
(function () {
Polymer({
is: 'html-echo',
properties: {
html: {
type: String,
observer: '_htmlChanged'
}
},
_htmlChanged: function (neo) {
// WARNING: potential XSS vulnerability if `html` comes from an untrusted source
this.innerHTML = neo;
}
});
})();
</script>
回答by Jacob Phillips
If you're sure it is what you want to do, just use innerHTML.
如果您确定这是您想要做的，只需使用innerHTML.
_renderHtml: function(html) {
this.$.dynamicHtmlContainer.innerHTML = html;
}
Or to dynamically add a shadow-dom child:
或者动态添加一个 shadow-dom 孩子：
_renderHtml: function(html) {
var div = document.createElement('div');
div.innerHTML = html;
Polymer.dom(this).appendChild(div);
}
I think Polymer.domis being removed in Polymer 2.0 though.
我认为Polymer.dom在 Polymer 2.0 中被删除了。
