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

Question

我有一个带有数据绑定的可信 html 文件，我想将其包含到 Web component.I 尝试了多种方法来包含 html 文件，但是数据-绑定不起作用。我知道 polymer 不会标记 html，因为它成为来自不受信任来源的 XSS 攻击的漏洞，但我有一个受信任的来源。

我已经知道 1 and 2 and tried out juicy-html, iron-ajax with inner-h-t-m-l and also the injectBoundHTML 函数。

除了自己绑定还有别的办法吗？

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

Answer 1

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

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);
  }
});

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

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

Inject html in polymer including data binding

html

javascript

data-binding

inject

polymer