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

Question

我使用 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）。

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