我正在try 将Java脚本库Lightbox2与rails 7.1应用程序一起使用.

配置/导入映射.rb:

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js"
pin "lightbox2", to: "lightbox2.js"

我已经下载了lightbox2.js并将其放在vendor/JavaScript目录中.

没有出现任何脚本控制台错误,但当点击该链接时,什么也不会发生--没有错误报告,只有静默.

我怀疑我需要以某种方式 bootstrap lightbox进入Lightbox来查找它的数据-lightbox标签,但我不知道应该如何做-我需要在Application.js中添加一些东西吗?

我试过从下面添加各种排列到application.js,但总是有一个错误,说明lightbox没有任何默认导出(我判断过,没有任何)或jQuery找不到:

(这在以前的UJS和rails 6中运行得很好.)

import "jquery"
import jQuery from 'jquery'

import "lightbox2"
Lightbox2.init()
import Lightbox from "lightbox2"

import lightbox from "lightbox2"
global.lightbox = lightbox

import "lightbox2"
import Lightbox2 from 'lightbox2'
application.register('lightbox2', Lightbox2)
<a data-lightbox="session_photos" href="fullres.jp">
   <img src="lowres.jpg">
</a>

推荐答案

bin/importmap pin lightbox2

由于没有页面重载,你必须在turbo:load个事件上初始化lightbox:

// app/javascript/application.js

import "jquery";
import lightbox from "lightbox2";

document.addEventListener("turbo:load", (event) => {
  lightbox.init();
});

Ruby-on-rails相关问答推荐

Rails turbo流只更新页面上的一个元素

Rails7--如何使用内联代码仅为操作运行BEFORE操作

Rails引擎importmap Uncaught ReferenceError:未定义tinymce

用变量替换 find_or_create_by 中的键

Rails:关于yields

有没有一种简单的方法可以让 pow 为 https 服务?

如何在 YAML 中声明带有单引号和双引号的字符串?

File.open,写入和保存?

Gem 更新:在从 ASCII-8BIT 到 UTF-8 到 US-ASCII 的转换中,无法将 "\xE7" 转换为 UTF-8

jQuery ajax 请求不会触发 Rails 控制器的 JS 响应?

Rails ActiveRecord 查询日期范围

将根 url 重定向到 Rails 应用程序中的其他位置

Redis 引发需要 NOAUTH 身份验证错误,但没有设置密码

Rails 3 SSL 路由从 https 重定向到 http

我可以在 Ubuntu 上使用 apt-get 安装 gems 吗?

过滤器在渲染之前但在控制器之后执行?

您推荐哪些工具来分析 Rails 应用程序?

我怎样才能看到水豚在失败的黄瓜步骤中发现了什么?

使用 ActiveRecord 获取列名

未捕获的 ReferenceError:未定义 ReactDOM