Javascript 聚合物JS与Rails TurboLink冲突
正在尝试将PolymerJs与启用了Turbolinks的Ruby-on-Rails项目一起使用。聚合物组件的初始加载工作正常,但当我单击链接时,新页面会呈现,但我的聚合物组件不会重新初始化。相反,它们看起来好像根本没有运行JS 我在标题中加载聚合物组件和平台,因此它们不会加载“页面更改”(TurboLink就是这样工作的-它只会重新加载主体) 假设我想“刷新”我的自定义元素和页面上的核心ajax标记,那么我似乎可以通过执行以下操作来“伪造”Javascript 聚合物JS与Rails TurboLink冲突,javascript,ruby-on-rails,polymer,turbolinks,Javascript,Ruby On Rails,Polymer,Turbolinks,正在尝试将PolymerJs与启用了Turbolinks的Ruby-on-Rails项目一起使用。聚合物组件的初始加载工作正常,但当我单击链接时,新页面会呈现,但我的聚合物组件不会重新初始化。相反,它们看起来好像根本没有运行JS 我在标题中加载聚合物组件和平台,因此它们不会加载“页面更改”(TurboLink就是这样工作的-它只会重新加载主体) 假设我想“刷新”我的自定义元素和页面上的核心ajax标记,那么我似乎可以通过执行以下操作来“伪造” custom_elements = document
custom_elements = document.querySelectorAll("my-custom-element, core-ajax ")
for element in custom_elements
element.parentNode.replaceChild(element.cloneNode(), element)
不过,我猜还有一种更为惯用的方法。还尝试在元素内部再次调用Polymer()调用,但没有成功。它似乎可以正常发射,但并没有暗影空间的连接或任何其他活动表明聚合体试图重新连接我的元素。我也尝试过使用preventDispose,但这似乎不起作用,因为正在从服务器加载一个全新的主体
如何让Polymer/Platform重新初始化页面上的所有元素?我应该打什么电话?
或者,如果不能做到这一点,如何初始化一个给定的聚合物元素。为Turbolinks 4编写。未经Turbolinks 5测试 Turbolinks在通过replaceChild获取文档正文后替换文档正文 这不会触发“元素升级”,因为观察者在这种情况下似乎不会开火 我想出了两种不同的解决方案来解决这个问题 导入整个身体
$(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);
更新
这似乎符合官方认可的处理这种情况的方式
这也是为什么需要这个步骤的一个很好的用例
要了解在采用时为什么要避免更改类型,
考虑一个元素在一个移动到主
文件。您可能不想回到整个生命周期
只是因为它移动到了一个新文档
通过这些问题中的适当事件来总结您的功能。我应该包装哪些事件?-我如何告诉Polymer/Platform重新初始化页面上的所有元素?要打什么电话?谢谢你的链接。当我获得更多关于活动的信息时,这会有所帮助。以前没有使用过聚合物,但你一开始是如何称呼它的?你有没有在某处运行的示例?我不熟悉Rails Turbolinks,但我可能会通过一个例子来了解到底发生了什么。聚合物组件只需要添加到DOM中,就可以变得活跃。Peter Burns-我不会马上这么做。如果只是在正常情况下添加,聚合物组分确实有效。似乎是成熟的宝石有更好的整合。但还没有亲自调查以确认他们解决了上述问题。您好,您把代码放在哪里了?我对rails 5、turbolinks 5和polymer有问题……这个答案可能对turbolinks 5不起作用。最初的解决方案与普通的javascript文件一样放置在javascript资产包中时工作正常。它不需要任何特殊设置。
$(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);