Question

Rails初学者（v5.2.1），我尝试结合一些JavaScript。

我在 app / javascript / packs 中有一个函数extendCard，该函数将事件侦听器放置在我所有带有“ card”类的元素上。我导出了此函数，并将其导入了 app / javascript / packs / application.js 中。当我从 application.js 调用它时，此函数有效。

为了简单起见，假设此函数为：

function extendCard() {
  let cards = document.querySelectorAll(".card");
  for(let i = 0; i < cards.length; i++) {
    cards[i].addEventListener("click", function() {
      console.log("click works");
    });
  }
}

export { extendCard };

在 application.js 中：

import { extendCard } from './extend';
extendCard();

在 views / layouts / application.html.erb 中，我输入了：

<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>

有时候，我需要刷新显示的卡，但要使用Ajax来完成。我将remote: true放在按钮上，以刷新显示的卡片（带有过滤器），并使用存储在 app / views / cards 中的 js.erb 文件渲染新卡片。 em>。刷新工作正常。

现在，我需要在这些新卡上再次添加事件监听器。我想调用我的函数extendCard，但是我不知道如何实现它。当我打电话时，我得到了：

未捕获的ReferenceError：未定义extensionCard

我唯一能做的就是在 js.erb 中重写我的函数（但实际上我有很多），而且不是很干。

请注意，我有 webpacker gem 。我不太了解，但我认为这是相关的。

所以，我的问题是：如何轻松访问在 app / javascript / packs / application.js 中导入的功能？如果可能的话，我想在Vanilla JS中制作。

Rails-从应用程序/视图中的js.erb调用应用程序/ JavaScript中的JS函数

0 个答案: