在 Polymer 1.0 中具有绑定的文本环绕元素

Posted 2023-02-19

【中文标题】在 Polymer 1.0 中具有绑定的文本环绕元素

【英文标题】：Text wrapping element with binding in Polymer 1.0

【发布时间】：2016-12-30 00:57:14

【问题描述】：

我使用 Polymer 创建了一个自定义 Web 组件，它可以包装文本并稍微改变它（在此概念验证中转换为大写）。

元素本身适用于静态内容。但是动态绑定内容时，组件无法显示内容。

例如：

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

关于如何捕捉（light DOM）内容的变化，以便我可以重新转换文本有什么建议吗？

正如您在注释代码块中看到的那样，我已经尝试使用 MutationObserver，但未能创建工作原型。我的猜测是我没有使用正确的节点（在我的例子中是this.root）。

【问题讨论】：

您找到解决方案了吗？我现在也在写一个文本包装器，但到目前为止还没有解决方案对我有用。唯一可以完成这项工作的是将文本作为属性传递（我认为这不干净）

@Yorrd：不，我还没有找到解决方案。我还尝试将元素的内容与Templatizer 行为一起放在template 标记中，但未能产生任何有用的结果。

【参考方案1】：

我不认为 ObserveNodes（或 MutationObserver）是解决这个问题的最佳方式。 ObserveNodes 跟踪子元素节点 的添加和删除时间。

在您的情况下，DOM 节点没有被添加或删除，只是元素的内部文本正在发生变化。 ObserveNodes 没有接收到这些更改。

我会推荐另一种方法，我认为它更符合聚合物的做事方式，使用content 标签：

为了支持元素的 light DOM 与其本地 DOM 的组合， Polymer 支持内容元素。 content 元素提供 一个插入点，元素的轻 DOM 与 它的本地 DOM

我会使用内容标签来创建一个插入点，然后通过 shadow DOM 设置它的样式（文本转换：大写）：

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

【讨论】：

感谢您的意见，但我正在寻找检测文本更改的通用解决方案，因为我将不会进行问题中提出的如此简单的转换。我将尝试创建一个带有“查看更多”和“查看更少”切换链接的文本缩短器。目前我正在将文本绑定到一个属性，它现在可以工作。但我仍在为提出的问题寻找解决方案。