Rails Flatpickr 控制器不想注册

如何解决Rails Flatpickr 控制器不想注册

我在我的 rails 应用程序中扩展了刺激 flatpickr 控制器有困难。我的问题是为什么刺激 flatpickr 仅在我手动注册控制器时才起作用？我已按照“高级用法”here 下的步骤操作。为了确认一下，我正在使用刺激 flatpickr，它在我手动注册时起作用。当我使用下面的代码时，flatpickr 按预期工作。

javascript/packs/application.js

import { Application } from 'stimulus'
import { deFinitionsFromContext } from 'stimulus/webpack-helpers'

const application = Application.start()
const context = require.context('../controllers',true,/\.js$/)
application.load(deFinitionsFromContext(context))

// import Flatpickr
import Flatpickr from 'stimulus-flatpickr'

// Import style for flatpickr
require("flatpickr/dist/flatpickr.css")

// Manually register Flatpickr as a stimulus controller
application.register('flatpickr',Flatpickr)

当我创建一个新的 flatpickr 控制器时，flatpickr 不显示。我正在重新创建 this 应用

javascript/controllers/flatpickr_controller.js

// import stimulus-flatpickr wrapper controller to extend it
import Flatpickr from 'stimulus-flatpickr'
import Rails from "rails-ujs";


// import a theme (Could be in your main CSS entry too...)
import 'flatpickr/dist/themes/dark.css'

// create a new Stimulus controller by extending stimulus-flatpickr wrapper controller
export default class extends Flatpickr {
  initialize() {
   //global options
    this.config = {
      enableTime: true,time_24hr: true
    };
  }
  connect() {
    //define locale and global flatpickr settings for all datepickers
    this.config = {
      locale: this.locale,altInput: true,showMonths: 2
    };

    super.connect();
  }

  // automatically submit form when a date is selected
  change(selectedDates,dateStr,instance) {
    const form = this.element.closest("form");
    Rails.fire(form,"submit");
  }

  get locale() {
    if (this.locales && this.data.has("locale")) {
      return this.locales[this.data.get("locale")];
    } else {
      return "";
    }
  }
}

javascript/vendor/rails.js

import Rails from "rails-ujs";
Rails.start();

javascript/vendor/stimulus.js

import { Application } from "stimulus";
import { deFinitionsFromContext } from "stimulus/webpack-helpers";
const application = Application.start();
const context = require.context("controllers",/.js$/);
application.load(deFinitionsFromContext(context));

javascript/vendor/turbolinks.js

import Turbolinks from "turbolinks";
Turbolinks.start();

javascript/packs/application.js

import "vendor/rails";
import "vendor/turbolinks";
import "vendor/stimulus";

views/layouts/application.html.erb

<head>

    <%= javascript_include_tag "application" %>
    <%= stylesheet_link_tag    'application',media: 'all','data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application','data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application','data-turbolinks-track': 'reload',defer: true %>

</head>