Question

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

我正在标题中加载聚合物组件和平台，因此他们没有加载＆＃39;页面更改＆＃39; （这就是turbolinks的工作方式 - 它只会重新加载身体）。

我似乎能够伪造它＆＃39;通过以下假设我想要刷新＆＃39; 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

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

要了解为什么在采用时可能要避免更改类型，考虑一个出生在一个元素中的元素被移入主体文献。您可能不希望回到整个生命周期只因为它转移到一个新文件...

Polymer JS与Rails Turbolinks冲突

1 个答案: