1

我真的很想知道如何将 jqTree 作为 webpacker webpack 集成到我的 Rails 6 应用程序中

更新：- 使用 yarn add jqtree 似乎神奇地解决了我的大部分问题，但是我目前面临的树不是函数错误

我正在使用 Ancestry gem 来组织菜单项，我需要一个拖放式 javascript 树视图解决方案，它可以很好地与 Ancestry gem 配合使用。我选择了 jqTree 作为我想要的解决方案，但我很高兴被说服使用替代方案，因为周围似乎有很多，但最初我只想能够至少获得一个在 Rails 6 中工作的树视图大概我必须从设置 jQuery 开始，有很多关于如何执行此操作的资源，所以我想这更多是关于如何在 Rails 6 应用程序中启动和运行任何 jQuery 组件我想我必须从一个 jsx 文件并导入一些东西并将一些 css 导入到 application.scss 但是这应该是什么样子我真的不确定

到目前为止，我已经按照这里的说明设置了 jQuery https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

我可以通过一个简单的警报确认这一切都已连接并正常工作

我已经取得了一些进展，而不是下载 jqTree 文件，我使用 yarn 来安装 jqTree

更换

我已经下载了 jqTree 文件并将它们解压缩到我的 javascript/packs 文件夹中名为 jqTree 的文件夹中

和

yarn add jqtree

现在我已经整理出了没有 ; 的要求。所以

require ;'jqTree/tree.jquery.js'

变成

require('jqtree')

同样在我的 javascript/packs 文件夹中，我创建了一个 sortable.js 文件，其中包含以下内容

require ;'jqTree/tree.jquery.js'

jQuery(window).on('load', function () {
  alert("Done"); //This works!
});

$(function() {
  $('#tree1').tree({
      data: data,
      autoOpen: true,
      dragAndDrop: true
  });
})

这 ; 在require语句中让我很困惑，但控制台错误要求它

现在看起来像这样

require("jqtree");
$(function() {
  alert($('#tree1').data('items'));
});

$('#tree1').tree({
    data: $('#tree1').data('items'),
    autoOpen: true,
    dragAndDrop: true
});

使用上面的代码，我得到一个参考错误：数据未定义在视图中我有以下代码

<%=javascript_pack_tag("sortable")%>

<%= content_tag "div", id: "tree1", data: {items: @menu_items} do %>
  Loading items...
<% end %>

我现在遇到的问题是我的浏览器报告树不是函数的错误。

在我的 application.css.scss 我有

 *= require "jqtree.css"

哪个不起作用

4

1 回答 1

1

我对此有一个详细的答案，这花了我相当长的时间来整理，我将在接下来的几天里用这个细节更新这个答案，但首先要让所有东西都与 jQuery、jQuery-ui 和组件本身正确连接这个案例是jqTree

Yarn 绝对是答案 从命令行开始添加相关包

yarn add jquery
yarn add jquery-ui
yarn add jqtree

一旦安装了相关的纱线包，我需要使 jQuery 和 jQuery-ui 可用，原因我还没有完全理解，一个简单的要求是不够的

按照这篇文章https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

我在config/webpacker文件夹中设置了 environment.js 文件，看起来像这样

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
);
const aliasConfig = {
    'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};

environment.config.set('resolve.alias', aliasConfig);

module.exports = environment

重新启动服务器后，我在app/javascript/packs文件夹中创建了一个名为 test.js 的简单 js 文件，据我所知，这是所有 javascript 现在所在的位置，尽管仍然可以通过将 javascript 放入assets/javascript文件夹来使用 sprockets，我被告知，没有解释为什么，将 webpacker 与 sprocket 混合来提供 javascript 并不是一个好主意。Webpacker 确实也能够提供样式表，但是我仍然更喜欢我的样式表由 app/assets 文件夹中的 sprocket 提供，并使用传统上在 Rails 应用程序中完成的样式表链接标签，因为测试证明这种方式更有效，所以混合以这种方式使用 webpacker 的 sprockets 似乎不是问题。

我只是在 test.js 文件中添加了一个简单的警报消息，只是为了检查 webpacker 和 jQuery 是否都正确连接。

所以 test.js 看起来像这样

require("jquery-ui");
require("jqtree");

$(function() {
  alert($('#tree1').data('items'));
});

然后使用 javascript 我只是在视图中包含了一个 javascript 包标签，我想像这样使用它。

在随机的 edit.html.erb 视图中

<h1>Editing Menu Item</h1>

<%= render 'form', menu_item: @menu_item %>

<%= link_to 'Show', [:admin, @menu_item] %> |
<%= link_to 'Back', admin_menu_items_path %>

<%=javascript_pack_tag("test")%>

不需要文件名的路径或扩展名，它就可以工作！

我发现这种方法非常简洁，有两个原因

1）我不会通过将页面特定的javascript包含在每个页面中来不必要地膨胀网页，方法是将其包含在application.js文件中，该文件默认包含在布局中，因此包含在每个页面中。

2）我似乎不必担心 DOM 加载的事件，到目前为止还没有 turbolinks 干扰它的问题，尽管我怀疑这可能更多是靠运气而不是判断，我可能不得不在未来修改这个想法并做出使用'data-turbolinks-track': 'reload'选项，但到目前为止还不错，这不是必需的。

因此，现在一切都已连接并正常工作，是时候让 jqTree 组件与祖先 gem 一起使用，以便能够为站点构建和组织菜单项，

但到目前为止，使用 yarn top 安装组件并正确连接 jQuery 是一件简单的事情。我最初没有使用纱线，这导致我遇到了各种各样的问题，导致了我最初的问题。

剩下的就是跟着...

于 2020-05-06T22:02:37.210 回答