2

我想知道如何在通过 jQuery 或虚拟 DOM 创建后修改 Polymer 1.0 标签。

我正在尝试使用 Mithril.js 的 Polymer 1.0。Polymer 0.5.5 具有 Shadow DOM，其标签文字和内部结构（在 Chrome 的检查器上）几乎相同。但是 1.0 使用了 shady DOM，它作为 HTML 模板工作。

资源：

<paper-element>hello world</paper-element>

聚合物 0.5.5 检查员的结果：

<paper-button role="button" tabindex="0">hello world</paper-button>

检查员的聚合物 1.0 结果：

<paper-button role="button" tabindex="0" aria-disabled="false" class="x-scope paper-button-0">
  <paper-ripple class="style-scope paper-button">
     <div id="background" class="style-scope paper-ripple"></div>
     <div id="waves" class="style-scope paper-ripple"></div>
  </paper-ripple>
  <paper-material animated="" class="content  style-scope paper-button x-scope paper-material-0" elevation="0">
    hello world
  </paper-material>
</paper-button>

例如，像这样执行 jQuery 命令：

$("paper-element").text("new label");

它适用于 0.5.5（它显示正确的标签），但会破坏 1.0（内部标签已经变成了只是标签）。这种新行为不利于通过其他 DOM 操作库操作 Polymer 的自定义标签（起初，我在玩 Mithril.js 时遇到了这个问题）。而且我找不到任何 API 来重新初始化内部标签。

有没有什么好的解决方案可以在创建后修改 Polymer 1.0 标签以支持虚拟 DOM 或 jQuery？

更新（2015 年 6 月 3 日）

我从Polymer 文档中找到了解决方案。添加以下代码段后，Polymer 1.0 可以在 Mithril 虚拟 DOM 上工作：

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

通过此设置，Polymer 开始使用 Shadow DOM 而不是默认的 Shady DOM。它与 Polymer 0.5.5 和 JavaScript DOM API 一样友好。感谢你们！

4

2 回答 2

1

理想情况下，它paper-button会公开用于修改内容的属性或方法，但是文档没有列出类似的内容。

幸运的是，它仍然是 HTML，并且可以使用。在演示页面上，我选择了 Chrome Inspector 中的一个按钮并运行以下代码来更新按钮的内容：

$0.querySelector('paper-material').innerHTML = 'testing';

在 Chrome 控制台$0中是指当前在 Chrome Elements Inspector 中选择的元素，在本例中为paper-button元素之一。

于 2015-06-01T20:10:55.323 回答
1

像 Polymer 集合中的那些 Web 组件很难自定义和动态填充。shadow DOM 的性质使其不受外部影响，在我看来，这是 Web 组件的一个关键限制。

但是，可以将这些元素重构为 Mithril 组件以允许自定义控制。在NPM和Github上以Polythene为名，使用 Mithril 制作了一系列出色的材料设计元素。

于 2015-06-02T04:16:39.257 回答