Polymer JS与Rails Turbolinks发生冲突

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

我在标题中加载聚合物组件和平台，因此它们没有加载’页面更改’（这是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重新初始化页面上的所有元素？ 我应该打什么活动？

或者，如果不能这样做，如何初始化给定的聚合物元素。

Answer 1

为Turbolinks撰稿4.未经测试的Turbolinks 5

Turbolinks在通过replaceChild获取后取代了Document Body

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

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

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

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

导入整个身体

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

仅导入特定的已注册聚合物元素

 $(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

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

要了解为什么在采用时可能希望避免更改类型，请考虑将其中的元素移动到主文档中。 您可能不希望仅仅因为它移动到新文档而返回生命周期…