聚合物设置属性 Javascript 错误

Question

我对 Polymer 非常（非常）陌生，我正在尝试创建我的第一个组件。我创建了一个 Plunker，但由于某种原因无法正常工作：http://plnkr.co/edit/RbcBuO9y8SUHyKqe7OJA

无论如何，你可以在那里看到我的代码。

它有一个组件blob-component.html，这是非常基础的。它只有一个标签和标签的内容。

在 index.html 上，我想在单击按钮时更新这两个。

在 Plunker 中，组件没有解析组件，所以我们只能显示 innerHTML，但是当我运行在我的开发环境中这样做时，我确实得到了标签显示（两次，如定义）。

但是，当我尝试通过点击按钮进行设置时，出现错误：

http://localhost:50169/Content/WebComponents/Polymer/webcomponentsjs/webcomponents.js 中未处理的异常 0x80070057 - JavaScript 运行时间错误：参数无效。

这发生在

unsafeUnwrap(this).data = value;

如果我放入断点，那么我可以看到

this 是定义的对象并且

e = "Updated label Initial label"

如您所见，我也尝试过使用 setAttribute() 而不是仅仅分配值，但我遇到了同样的问题。

这显然是超级简单的，但我不明白为什么会这样。

这是在 IE11 中。在 Chrome 中，我没有收到错误，但单击按钮时标签消失了。

有什么建议吗？谢谢。

Answer 1

你的例子有两个问题。我正在尝试这是 Chrome 但也应该修复其他浏览器。

首先，您应该注意到 polymer.html 导入失败是因为 CORS。在 plunker、jsbin 等中你可以使用 polygit

http://polygit.org/components/polymer/polymer.html

当您更改 innerHTML 时会出现第二个问题。当使用默认的 Shady DOM 时，通过设置 innerHTML 属性，您只需删除在 <dom-module> 中声明的任何内容。在 Chrome 中，您可以通过强制 Shadow DOM 来解决这个问题，但在 Firefox/IE/Safari 中它仍然无法正常工作。

现在你应该避免完全替换内部 HTML 并且要么使用 DOM 逐个节点，要么用额外的容器包装你的标签内容：

<blob-component id="p">
  <div>
    Flip
  </div>
</blob-component>

<script>
   function changeLabels() {
     var blob = document.getElementById("p");
     blob.querySelector('div').innerHTML = "Flop";
   }
</script>

聚合物设置属性 Javascript 错误

Polymer setting property Javascript error

polymer-1.0

聚合物设置 属性 Javascript 错误

Polymer setting property Javascript error

polymer-1.0

聚合物设置属性 Javascript 错误