Rails、turbolinks 和 javascript。如何避免出现重复的 Switchery 按钮？

Question

我正在我的 Rails 应用程序中实现 Switchery 按钮，并且 Turbolinks 已打开。当我导航到另一个页面，然后单击返回按钮时，按钮被复制。

这是我的 Javascript 代码：

$(document).on('turbolinks:load', function() {
var elem = document.querySelector('.js-switch');
var switchery = new Switchery(elem, {className:"switchery switchery-small"});
});

HTML 视图：

<b>Assign as administrator?<span> <%= f.check_box :admin, class:"js-switch" %></span></b>

截图： View

那么我该如何处理这个问题呢？

Answer 1

Multiple calls 防止在同一个元素上调用两次切换，但它对 turbolink 没有帮助。由于页面是从缓存中获取的，所以当它们被添加到 DOM 时，它的点击/更改事件需要重新初始化。我发现的唯一方法是删除现有元素（看起来它们只是视觉元素），然后重新初始化它们。 turbolinks:load 函数变成这样：

$(document).on('turbolinks:load', function(e) {
  // Delete existing switches if there are any...
  $(".switchery").remove();
  // As we removed all the switchery elements, we need fetch all of them again.
  var els = document.querySelectorAll(".js-switch");
  els.forEach(function(el) {
    new Switchery(el);
  })
});

Answer 2

Multiple calls

你可以通过查找data-switchery="true"来过滤掉已经调用过的现有元素。

  var elem = document.querySelector('.js-switch:not([data-switchery])');