javascript - rails Turbolinks 5 : How do I run JS code on a particular page enter and exit?

Question

我正在使用 Turbolinks 5 和 Rails，试图弄清楚它如何改变游戏规则。

传统上，我的页面通过一组 JavaScript 来工作，其中包含库(jQuery、Knockout 等)和应用程序特定代码，例如 View 模型 - 所有以某种有组织的结构附加到窗口对象。应用程序某个区域中的所有 Controller ，例如前端将共享相同的 JavaScript(和 CSS)包。

在每个使用 JavaScript 的页面上，都会有一个初始化程序来启动。例如:

$.ready(function() { window.users.update.init(#{@user_edit_view_model.javascript_configuration.to_json.html_safe}) } )

这个 init 函数的职责是设置一个淘汰 View 模型并将其绑定(bind)到某个节点。 javascript_configuration 可能包含当前用户的初始化状态。

无论如何，这种方法似乎不太适合 Turbolinks。

我知道只有当用户访问users#edit作为第一页(或进行硬刷新)时它才会触发，所以$.ready显然已经出局了图片的内容。

如果我附加到 turbolinks:load 事件，则上述代码不仅会在用户输入 users#edit 时触发，还会在用户导航到的任何页面上触发随后(直到他/她在某个时刻进行完全刷新)。

我已经能够通过定义一个在第一次执行后删除回调的函数来解决这个问题。

# For running code after the current page is ready
window.turbolinks_in = (callback) ->
  event_listener = ->
    callback()
    window.removeEventListener("turbolinks:load", event_listener)

  window.addEventListener "turbolinks:load", event_listener

此外，我还设计了:

# For running code when leaving the current page
window.turbolinks_out = (callback) ->
  event_listener = ->
    callback()
    window.removeEventListener("turbolinks:before-cache", event_listener)

  window.addEventListener "turbolinks:before-cache", event_listener

这两个函数似乎允许我在页面加载和“卸载”时运行代码。

我的问题是:

1. 鉴于我必须提出自己的包装函数，我怀疑 Turbolinks 是故意开发的，以阻止我使用的初始化流程。这是真的吗？
2. 如果这是真的，惯用的做法是什么？我应该如何设置淘汰 View 模型，或者就此而言，运行与特定页面相关的任何代码？
3. 如果不是这样，我如何可靠地为页面设置卸载/离开功能。当缓存页面替换为新页面时，不会发出 turbolinks:before-cache ，那么如何在缓存页面短暂显示后进行清理？我确实理解，当(已经)缓存的页面被替换时，不应触发 turbolinks:before-cache ，这在语义上是有意义的，但是它的位置是什么？像 turbolinks:unload 这样的东西不存在。

Answer 1

1. Seeing as I had to come up with my own wrapper functions, I suspect Turbolinks has been deliberately developed to discourage the initialization flow that I use. Is that true?
2. If it's true, what is the idiomatic way to go about? How should I set up a knockout view model or for that matter, run any code that pertains to the particular page?

就在特定页面上运行代码而言，首先，我通常会避免为该页面添加内联脚本。这通常在非 Turbolinks 应用程序中工作正常，但在启用 Turbolinks 的应用程序中，状态和事件处理程序在页面加载之间维护，事情可能会变得有点困惑。理想情况下，您应该将所有 JS 包含在一个文件中。 (如果您想知道如何注入(inject)服务器生成的内容，我稍后会介绍。)

在设置和拆卸方面，您的做法是正确的，但我想知道您是否会考虑使用 turbolinks_in 和 turbolinks_out 函数在 turbolinks:load 上实现单个初始化函数，然后在 turbolinks:before-cache 和 turbolinks:before-render 上实现单个拆卸函数code> (这是您要执行的“卸载”事件)。您的设置/拆卸代码可能如下所示:

document.addEventListener('turbolinks:load', window.MyApp.init)
document.addEventListener('turbolinks:before-cache', window.MyApp.destroy)
document.addEventListener('turbolinks:before-render', window.MyApp.destroy)

因此，window.MyApp.init 不是直接在内联脚本中调用对象的 init 函数，而是决定要初始化哪些对象。

它是如何决定的？!

看起来您正在为 JS 对象镜像 Controller 名称和操作名称。这是一个很好的起点，我们只需要将这些名称输入客户端即可。一种常见的方法(我相信 Basecamp 使用过)是在 head 中使用 meta 元素来输出一些服务器生成的属性:

<meta name="controller_name" content="<%= controller_name %>">
<meta name="action_name" content="<%= action_name %>">

只要您的对象遵循 Controller /操作命名模式，您的应用程序的初始化函数可能类似于:

;(function () {
  window.MyApp = {
    init: function () {
      var controller = window[getControllerName()]
      var action
      if (controller) action = controller[getActionName()]
      if (action && typeof action.init === 'function') action.init()
    }
  }

  function getControllerName () {
    return getMeta('controller_name')
  }

  function getActionName () {
    return getMeta('action_name')
  }

  function getMeta (name) {
    var meta = document.querySelector('[name=' + name + ']')
    if (meta) return meta.getAttribute('content')
  }
})()

您可以按照此方法包含您的 JavaScript 配置:

<meta name="javascript_config" content="<%= @view_model.javascript_configuration.to_json %>">

然后您的应用程序的 init 函数可以使用如下配置调用相关的初始化程序:

window.MyApp = {
  init: function () {
    var controller = window[getControllerName()]
    var action
    var config = getConfig()
    if (controller) action = controller[getActionName()]
    if (action && typeof action.init === 'function') action.init(config)
  }
}

// …

function getConfig () {
  return JSON.parse(getMeta('javascript_config') || null)
}

最后，我们需要拆解初始化的结果。为此，我们将存储对象的 init 的返回值，如果它包含 destroy 函数，我们将调用它:

;(function () {
  var result

  window.MyApp = {
    init: function () {
      var controller = window[getControllerName()]
      var action
      var config = getConfig()
      if (controller) action = controller[getActionName()]
      if (action && typeof action.init === 'function') {
        result = action.init(config)
      }
    },
    // …
    destroy: function () {
      if (result && typeof result.destroy === 'function') result.destroy()
      result = undefined
    }
  }
})()

把它们放在一起:

;(function () {
  var result

  window.MyApp = {
    init: function () {
      var controller = window[getControllerName()]
      var action
      var config = getConfig()
      if (controller) action = controller[getActionName()]
      if (action && typeof action.init === 'function') {
        result = action.init(config)
      }
    },

    destroy: function () {
      if (result && typeof result.destroy === 'function') result.destroy()
      result = undefined
    }
  }

  function getControllerName () {
    return getMeta('controller_name')
  }

  function getActionName () {
    return getMeta('action_name')
  }

  function getConfig () {
    return JSON.parse(getMeta('javascript_config') || null)
  }

  function getMeta (name) {
    var meta = document.querySelector('[name=' + name + ']')
    if (meta) return meta.getAttribute('content')
  }
})()

显然，这种方法仅适用于每页一个 init，因此您可能需要对其进行调整以适应更多情况。实现这一点超出了本答案的范围，但您可能希望查看 T3 ，它会为您处理这一切!