在Polymer 1.0中綁定的文本包裝元素

我已經創建了一個包含聚合物的自定義Web組件，該文件包裝文本並略微改變它（在此概念證明中轉換爲大寫）。在Polymer 1.0中綁定的文本包裝元素

元素本身對靜態內容工作正常。但是，當內容被動態綁定時，組件無法顯示內容。

例如：

<my-wrapper>Hello, World!</my-wrapper> <!-- Works --> 
<my-wrapper>[[someText]]</my-wrapper> <!-- Doesn't work -->

目前我使用observeNodes，管理觸發了初始文本轉換，但未能觸發子的連續改變。

我目前的原型定義爲：

<dom-module id="my-wrapper"> 
    <template> 
    <span id="placeholder"></span> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-wrapper', 
     ready: function() { 
     var self = this; 
     Polymer.dom(Polymer.dom(this)).observeNodes(function(info) { 
      self.$.placeholder.textContent = info.target.textContent.toUpperCase(); 
     }); 
     /*var mutationObserver = new MutationObserver(function(e) { 
      console.log(e); 
     }); 
     mutationObserver.observe(this.root, {characterData: true, childList: true});*/ 
     }, 
    }); 
    </script> 
</dom-module>

和工作JSBin對於上述問題可以在這裏找到：http://jsbin.com/jumewuzuho/1/edit?html,console,output。

有關如何捕捉（光DOM）內容更改的任何建議，以便我可以重新轉換文本？正如你在代碼塊註釋中看到的那樣，我已經嘗試過使用MutationObserver，但是未能創建一個工作原型。我的猜測是我沒有使用正確的節點（在我的情況下爲this.root）。

來源

2016-08-23 alesc

您是否找到了解決方法？目前我還在編寫一個文本包裝器，但到目前爲止還沒有解決方案爲我工作。唯一能做這項工作的是將文本作爲屬性傳遞（這在我看來並不乾淨） – Yorrd

@Yorrd：不，我還沒有找到解決方案。我也嘗試將元素的內容與'Templatizer'行爲一起放入'template'標籤中，但未能產生任何有用的結果。 – alesc

我不認爲ObserveNodes（或MutationObserver）是接近最好的辦法。 ObserveNodes兒童跟蹤節點被添加並從您的元素中刪除。

在你的情況下，DOM節點是而不是被添加或刪除，它只是正在改變的元素的內部文本。 ObserveNodes沒有找到這些更改。

我會建議另一種方法，這在我微薄的意見是多與做事情的聚合物的方式排列，使用content標籤：

以支撐元件的光DOM的組成與當地的DOM，聚合物支持內容元素。該content元素提供在該元素的光DOM與當地DOM結合

我會用標記的內容，以創建插入點，然後通過影子DOM樣式它的插入點（文本轉換：大寫）：

<dom-module id="my-wrapper"> 
    <template> 
    <style> 
     :host { 
     text-transform: uppercase; 
     } 
    </style> 
    <content></content> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-wrapper' 
    }); 
    </script> 
</dom-module>

來源

2016-08-30 10:08:44

感謝您的意見，但我正在尋找一種檢測文本更改的通用解決方案，因爲我將*不會*做出如問題中所述的簡單轉換。我將嘗試使用「查看更多」和「查看更少」切換鏈接來創建文本縮略圖。目前，我將文本綁定到一個屬性，它現在可以工作。但我仍在尋找解決方案來解決所提出的問題。 – alesc

在Polymer 1.0中綁定的文本包裝元素

回答

相關問題