Блог

Я установил его с помощью yarn add bs-stepper

и я загрузил библиотеку в свой environment.js

 const { environment } = require("@rails/webpacker");

const webpack = require("webpack");

environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ["popper.js", "default"],
    Stepper: "bs-stepper",
  })
);

module.exports = environment;

 

и я уже создаю его экземпляр на своем pack/application.js

 import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
import "bootstrap";
import "../stylesheets/application";
require("admin-lte");
import "@fortawesome/fontawesome-free/js/all";

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip();
  var stepper = new Stepper($(".bs-stepper")[0]);
});

Rails.start();
Turbolinks.start();
ActiveStorage.start();

require("trix");
require("@rails/actiontext");
import "controllers";
 

но код не работает, когда я нажимаю эту кнопку

 <button class="btn btn-primary" onclick="stepper.next()">Next</button>
 

Я получил эту ошибку

 (index):223 Uncaught ReferenceError: stepper is not defined
    at HTMLButtonElement.onclick ((index):223)
 

Я думаю, это потому, что мой html не может найти stepper то, что объявлено в application.js

проблема в том, как я устанавливаю экземпляр Stepper

Мне нужно явно прикрепить его к переменной window ‘s следующим образом

 document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip();
  window.stepper = new Stepper($(".bs-stepper")[0]);
});