Question

我有一个带有数据绑定的可信html文件，我希望将其包含在Web组件中。我尝试了多种方法来包含html文件，但数据绑定不起作用。我知道聚合物不会标记html，因为它成为来自不受信任来源的XSS攻击的漏洞，但我有一个值得信赖的来源。

我已经知道1和2并尝试使用iron-ajax和injectBoundHTML功能的多汁html，inner-h-t-m-l。

除了自己绑定一切之外还有其他方法吗？

我想要包含的文件包含输入字段，它是预定义的表单。

Answer 1

您可以通过手动创建<template>并设置其内容来使用Templatizer。重要的是，您不能只设置innerHTML

＆＃13;

Polymer({
  is: 'my-elem',
  behaviors: [ Polymer.Templatizer ],
  ready: function() {

    var template = document.createElement('template'); 
    
    // you must prepare the template content first (with bindings)
    var templateContent = document.createElement('div');
    templateContent.innerHTML = 'First: <span style="color: red">[[person.first]]</span> <br> Last: <span style="color: green">[[person.last]]</span>';
    
    // and cannot simply set template's innerHTML
    template.content.appendChild(templateContent);
    
    // this will process your bindings
    this.templatize(template);        
    var person = {
      first: 'Tomasz',
      last: 'Pluskiewicz'
    };
    var itemNode = this.stamp({ person: person });
    
    Polymer.dom(this.root).appendChild(itemNode.root);
  }
});

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.19/webcomponents.min.js"></script>
    <link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html" />
  </head>

  <body>
    <my-elem>
    </my-elem>
       
    <dom-module id="my-elem">
      <template>
      </template>  
    </dom-module>
  </body>

</html>

＆＃13;

在聚合物中注入html包括数据绑定

1 个答案: