带有Turbolinks的StimulusJS，必须等待"turbolinks:load“事件来执行StimulusJS控制器。

Question

我有一个相当标准的Rails 5.2应用程序(几乎遵循所有的惯例)使用纱线和webpacker，在我的package.json和yarn.lock文件中有刺激版本的yarn.lock。

# package.json
{
  "name": "MY_APP_NAME",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^4.0.2",
    "coffeescript": "1.12.7",
    "stimulus": "^1.1.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.2.1"
  }
}

从StimulusJS语篇页面(https://discourse.stimulusjs.org/t/stimulusjs-and-turbolinks/669)开始，从刺激1.1开始，刺激控制器在DOM准备好turbolinks之后执行连接/初始化方法。

但是，让下面的控制器正确执行的唯一方法是添加事件处理程序，以等待turbolinks:load事件的启动。

如果是相关的信息，我尝试使用jQuery Select2插件来创建一个自定义的选择元素。

# app/javascript/packs/controllers/intake_customization_controller.js
import { Controller } from "stimulus";

export default class extends Controller {
  static targets = [ "userIds" ]

  initialize() {
    // Code will not execute without this event handler wrapping it...
    $(document).on("turbolinks:load", ()=> {
      $(this.userIdsTarget).select2()
    })
  }
}

HTML表单：

<%= form_with model: @account, url: settings_intake_customization_path, method: :put, id: "settings-intake_customization-form", data: { controller: "intake-customization" } do |form| %>
  <%= form.collection_select :user_ids, current_account.users, :id, :name, { include_blank: false }, { multiple: true, data: { target: "intake-customization.userIds" } } %>
<% end %>

我是不是错过了设置刺激控制器的东西？

使用turbolinks:load事件处理程序，我可以获得我想要的功能，但是从我在语篇论坛上看到的内容来看，我不应该使用事件处理程序。

我的应用程序是否有可能“缓存”了较旧版本的刺激计划，尽管package.json的说法并非如此？

Answer 1

据我理解，刺激计划是为了与图尔博林克斯合作而设计的。如果您需要将代码包装到turbolinks:load的事件处理程序中，我会感到惊讶。您可能希望使用connect事件而不是initialize事件，因为initialize事件是在控制器首次实例化时触发的。只要控制器连接到DOM，就会触发connect事件。

在用于文档生命周期回调的connection中，它声明：

当以下两种条件都为真时，控制器将连接到文档：

• 它的元素存在于文档中(即document.documentElement的后代)
• 它的标识符存在于元素的数据控制器属性中。

当控制器连接时，刺激调用它的connect()方法。

由于您希望使用jQuery Select2操作DOM，所以对我来说，connect生命周期回调似乎更合适。我将做更多的研究，但我可以想象，只要控制器的代码加载到浏览器中，就会触发initialize事件。如果是这样的话，那么在DOM树中使用控制器的部分(以及您要查询的DOM元素)有机会呈现之前，就有可能触发initialize事件：

# app/javascript/packs/controllers/intake_customization_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = [ "userIds" ]

  connect() {
    $(this.userIdsTarget).select2()
  }
}

我找到了一个文章 says使用connect而不是turbolinks:load。这篇文章是由一个已经发布了少量刺激教程的人写的，所以他看起来相当有名。我很难找到任何关于initialize和connect之间区别的细节，除了initialize每次被触发一次，connect每次附加到DOM时都会被触发。为了再次触发connect事件，需要在