javascript - Polymer JS 与 Rails Turbolinks 冲突

Question

尝试将 PolymerJs 与启用了 Turbolinks 的 Ruby on Rails 项目结合使用。 Polymer 组件的初始加载有效，但是当我单击链接时，新页面呈现，但我的 Polymer 组件没有重新初始化。相反，它们看起来好像根本没有在其上运行 JS。

我在页眉中加载 polymer 组件和平台，因此它们不会加载“页面更改”(这就是 turbolinks 的工作方式 - 它只会重新加载主体)。

假设我想“刷新”页面上的 my-custom-element 和 core-ajax 标签，我似乎可以通过执行以下操作来“伪造”

custom_elements = document.querySelectorAll("my-custom-element, core-ajax ") 
for element in custom_elements 
  element.parentNode.replaceChild(element.cloneNode(), element) 

不过，我猜还有一种更惯用的方法。还尝试再次调用元素内部的 Polymer() 调用，但没有成功。它似乎正常触发，但没有 shadowDom 的附件或任何其他事件表明 Polymer 已尝试重新附加我的元素。我也尝试过使用 preventDispose，但这似乎不起作用，因为正在从服务器加载一个全新的主体。

我如何告诉 Polymer/Platform 重新初始化我页面上的所有元素？我应该调用哪些事件？

或者，如果无法完成，如何只初始化给定的 polymer 元素。

Answer 1

为 Turbolinks 4 编写。未在 Turbolinks 5 中测试

Turbolinks 在通过 replaceChild 获取文档主体后替换它

https://github.com/rails/turbolinks/blob/master/lib/assets/javascripts/turbolinks.js.coffee#L97

document.documentElement.replaceChild(body, document.body);

这不会触发“元素升级”，因为在这种情况下观察者似乎不会触发。

我想出了 2 种不同的解决方案来解决这个问题。

导入整个 body

$(document).on "page:change", ->
   document.documentElement.replaceChild(document.importNode(document.body, true), document.body);

仅导入特定的注册 polymer 元素

$(document).on "page:change", ->
  for polymerElement in Polymer.elements
    for domElement in document.body.querySelectorAll(polymerElement.name)
      domElement.parentNode.replaceChild(document.importNode(domElement, true), domElement);

更新

这似乎符合官方认可的处理这种情况的方式

https://groups.google.com/forum/#!msg/polymer-dev/WaWbepYW97Q/XE3SQTyvyCUJ

这也是为什么需要这一步的一个很好的用例

To see why you might want to avoid changing type when adopting, consider an element born in an that gets moved into the main document. You probably wouldn't want to go back through the lifecycle just because it moved to a new document...