聚合物将数据绑定到加载了 innerHTML 的元素

Polymer binding data to element loaded with innerHTML

本文关键字：innerHTML 元素 加载 数据绑定 聚合物      更新时间：2023-09-26

我正在为一个项目使用聚合物。我有通过this.innerHTML加载的 html 元素。我想将这些元素中的数据绑定到主页。我不知道这是否可能。这是设置：我有一个主应用程序，它将元素绑定到我的<html-echo>元素的html属性。然后，此元素应使用 .innerHTML 加载 html（否则不会解析 html）。从注入的元素中，我想绑定其数据。这可能吗？

主应用 

<polymer-element name="main-app">
    <template>
        <html-echo html="{{htmlToBeEchoed}}"></html-echo>
    </template>
    <script>
        Polymer('main-app', {
            htmlToBeEchoed = "<test data='{{data}}'></test>";
        });
    </script>
</polymer-element>

html-echo.html

<polymer-element name="html-echo" attributes="html data">
    <script>
        Polymer('html-echo', {
          htmlChanged: function() {
            // WARNING: potential XSS vulnerability if `html` comes from an untrusted source :()
            this.innerHTML = this.html;
          }
        });
    </script>
</polymer-element>

测试.html

<polymer-element name="test" attributes="data">
    <script>
        Polymer('test', {
            data: 5
        });
    </script>
</polymer-element>

是的，使用 injectBoundHTML。从 https://github.com/Polymer/docs/issues/607：

/**
* Inject HTML which contains markup bound to this element into
* a target element (replacing target element content).
* @param String html to inject
* @param Element target element
*/
injectBoundHTML: function(html, element)

在聚合物元件中，代替

el.innerHTML = html;

做

this.injectBoundHTML(html, el);

相关文章：