在Polymer中訪問html內部內容標簽

Question

我正在嘗試訪問我在自己的聚合物元素中編寫的html，但它無法正常工作。 我該如何實現？

index.html

<my-element> content I am trying to access </my-element>

my-element.html

<polymer-element name='my-element'>
    <template>
        <content id='content'></content>
    </template>
    <script>
        Polymer({
            ready: function(){
                console.log('html: '+this.$.content.innerHTML);
            }
        });
    </script>
</polymer-element>

安慰

html:

Answer 1

不幸的是，執行插入內容節點為兄弟姐妹 content ，而不是嵌套節點。 也就是說，一切准備就緒后，文檔的結構將如下所示：

<content id='content'></content>
content I am trying to access

不像您預期​​的那樣：

<!-- THAT IS NOT HOW IT’S COMPOSED -->
<content id='content'>content I am trying to access</content>

幸運的是，您仍然可以訪問模板上下文中的childNodes ：

  Polymer({
      domReady: function() {
        var content = '';
        this.childNodes.array().forEach( function(el) {
          content += el.textContent; // do whatever you want here
        });
        console.log(content);
      }
  });

  //⇒ content I am trying to access 

希望能幫助到你。