2014-12-05 66 views
2

我正在使用Polymer作爲項目。我有通過this.innerHTML加載的html元素。我想將這些元素的數據綁定到主頁面。我不知道這是否可能。這是設置:我有一個主要應用程序,它將元素綁定到我的<html-echo>元素的html屬性。這個元素應該使用.innerHTML加載html(否則html不會被解析)。從那個被注入的元素我想綁定它的數據。這可能嗎?將聚合物數據綁定到使用innerHTML加載的元素

主應用

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

回答

1

是,使用injectBo undHTML。從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);

+0

是否有聚合物1.0當量? – 2015-09-07 02:23:09

+0

我也需要這個在聚合物1.0。如果它不可用,這是一個巨大的問題。通過innerHTML進行設置不是現代Web開發人員無法生存的地方! – 2016-01-16 04:55:24

+1

@Clay我對派對有點遲,但也許你可以在元素上設置inner-h-t-m-l屬性?

Bram 2017-05-02 19:55:00