如何将HTML注入到聚合物模板中

我使用polymer-jsonp来执行JSONP请求，但响应有时包含html。

例如，假设post.content为"<strong>Foo</strong> bar" ，那么如何显示{{post.content}}以使"Foo"为粗体？

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

Answer 1

聚合物不会通过数据绑定标记未转义的HTML，因为它成为XSS攻击的漏洞。

目前正在谈论如何在有限的情况下对HTML进行标记，或允许进行自定义过滤，但这尚未在数据层实现。

可以使用额外的自定义元素来执行您现在想要的操作，但是如果您将不可信的HTML呈现在您的页面中，可能会发生不好的事情。

这是一个显示这种技术的例子：

http://jsbin.com/durajiwo/1/edit

Answer 2

对于那些寻找聚合物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> 

Answer 3

如果你确定这是你想要做的，只需使用innerHTML 。

 _renderHtml: function(html) { this.$.dynamicHtmlContainer.innerHTML = html; } 

或者dynamic添加一个影子小孩：

 _renderHtml: function(html) { var div = document.createElement('div'); div.innerHTML = html; Polymer.dom(this).appendChild(div); } 

我认为Polymer.dom在Polymer 2.0中被删除了。