Polymer 将数据绑定到使用 innerHTML 加载的元素

Question

我正在为一个项目使用Polymer。我有通过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>

test.html

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

Answer 1

是的，使用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);