Polymer JS与Rails Turbolinks冲突 [英] Polymer JS conflicts with Rails Turbolinks

问题描述

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

Trying to use PolymerJs with a Ruby on Rails project with Turbolinks enabled. The initial loading of Polymer components works,but when I click on a link the new page renders, but my Polymer components are not reinitialized. Instead they look as if no JS has been run on them at all.

我在标题中加载聚合物组件和平台，所以它们没有加载'页面变化'（这就是turbolinks的工作原理 - 它只会重新加载身体）。

I am loading polymer components and platform in the header, so they are not loaded with the 'page changes' (this is how turbolinks works - it only reloads the body).

我似乎可以通过做以下假设'伪造'假设我想'刷新'my-custom-element和我页面上的core-ajax标签

I seem to be able to 'fake it' by doing the following assuming I wanted to 'refresh' my-custom-element and the core-ajax tags on my page

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

我猜测有一种更惯用的方法可以做到这一点。还尝试再次调用元素内部的Polymer（）调用，但没有成功。它似乎正常启动，但没有附加shadowDom或任何其他活动，表明Polymer试图重新附加我的元素。我也尝试过使用preventDispose，但这似乎不起作用，因为从服务器加载了一个全新的主体。

I am guessing there is a more idiomatic way to do it though. Also tried to call the Polymer() call inside the element again with out success. It seems like it fires properly, but there is no attachment of the shadowDom or any other activity indicating Polymer has attempted to reattach my elements. I also tried using preventDispose, but that does not seem to work as an entirely new body is being loaded from the server.

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

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

Or if that cant be done, how do a initialize just a given polymer element.

推荐答案

为Turbolinks编写4.在Turbolinks中未经测试5

Turbolinks通过replaceChild获取后取代Document Body

Turbolinks replaces the Document Body after fetching it via replaceChild

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

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

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

This is not trigger the 'upgrading of elements' as it seems the Observers do not fire in this case.

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

I have come up with 2 different solutions to get around this.

导入整个身体

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

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

Importing just the specific registered Polymer Elements

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

更新

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

This seems to align with the officially endorsed way to handle this situation

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

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

Also a good use case for why this step is required

了解为什么你可能想避免改变类型在采用时，
考虑一个元素中出现的元素被移入主
文档中。您可能不希望回到生命周期
只是因为它移动到新文档...

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

这篇关于Polymer JS与Rails Turbolinks冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！