Javascript Rails Turbolinks 5：如何在特定页面上运行JS代码？

我正在玩Turbolinks 5和Rails，试图找出它是如何改变游戏的

传统上，我的页面通过一个包含库（jQuery、Knockout等）和特定于应用程序的代码（例如视图模型）的javascript包来工作——所有这些都以某种有组织的结构连接到窗口对象。应用程序某个区域中的所有控制器（例如前端）将共享相同的JavaScript（和CSS）包

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

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

这个init函数的职责是建立一个淘汰视图模型并将其绑定到某个节点。javascript_配置可能包含当前用户的初始化状态

无论如何，这种方法似乎对TurboLink一点也不起作用

我知道只有当用户访问

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

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

我的问题是：

鉴于我不得不提出自己的包装函数，我怀疑Turbolinks是故意开发的，以阻止我使用的初始化流。这是真的吗

如果这是真的，那么惯用的方法是什么？我应该如何设置一个淘汰视图模型，或者运行任何与特定页面相关的代码

如果不是这样，如何可靠地为页面设置卸载/离开功能

turbolinks:before cache

在缓存页面被替换为新页面时不会发出，那么如何在缓存页面短暂显示后进行清理？我确实理解，从语义上讲，当（已经）缓存的页面被替换时，不应该触发

turbolinks:before cache

，但是它的位置是什么呢？类似于

turbolinks:unload

的东西不存在

鉴于我不得不提出自己的包装函数，我怀疑Turbolinks是故意开发的，以阻止我使用的初始化流。这是真的吗

如果这是真的，那么惯用的方法是什么？我应该如何设置一个淘汰视图模型，或者运行任何与特定页面相关的代码

就在特定页面上运行代码而言，首先，我通常会避免为该页面添加内联

脚本。这在非Turbolinks应用程序中正常工作，但在Turbolinks启用的应用程序中，在页面加载之间维护状态和事件处理程序，事情可能会变得有点混乱。理想情况下，您应该在单个文件中包含所有JS。（如果您想知道如何注入服务器生成的内容，我将在稍后介绍。）

你在设置和拆除方面是正确的，但是我想知道，如果不是“代码> TurBurnsx在和 TurBurnsSuxOut函数，你可以考虑在代码< TurBurnks:Load < /Calp>上实现一个安装的单个初始化函数，随后在
turbolinks:before cache
和
turbolinks:before render
（这是您要处理的“卸载”事件）上执行单个拆卸功能。您的安装/拆卸代码可能如下所示：

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

因此，与其在内联脚本中直接调用对象的
init
函数，不如由
window.MyApp.init
决定初始化哪些对象

怎么决定

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

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

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

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

最后，我们需要分解初始化的结果。为此，我们将存储对象的
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，因此您可能希望对其进行调整，以使用更多init。实现这一点超出了这个答案的范围，但是您可能希望研究一下，它为您处理了所有这些

鉴于我不得不提出自己的包装函数，我怀疑Turbolinks是故意开发的，以阻止我使用的初始化流。这是真的吗
如果这是真的，那么惯用的方法是什么？我应该如何设置一个淘汰视图模型，或者运行任何与特定页面相关的代码
就在特定页面上运行代码而言，首先，我通常会避免为该页面添加内联
脚本。这在非Turbolinks应用程序中正常工作，但在Turbolinks启用的应用程序中，在页面加载之间维护状态和事件处理程序，事情可能会变得有点混乱。理想情况下，您应该在单个文件中包含所有JS。（如果您想知道如何注入服务器生成的内容，我将在稍后介绍。）

你在设置和拆分方面是正确的，但是我想知道，如果不是“代码> TurBurnsx在和 TurBurnsSuxOut函数，你会考虑实现一个初始化函数。
;(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')
  }
})()