在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中绑定的文本包装元素

回答

相关问题