如何将 Rails 6 中的 JqTree 与 webpacker 集成，树不是函数 [英] How to integrate JqTree in Rails 6 with webpacker, tree is not a function

问题描述

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

I am really wanting to know how to integrate jqTree as a webpacker webpack in my Rails 6 application

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

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

I am using the Ancestry gem to organise menu items and I need a drag and drop javascript tree view solution that will work nicely with the Ancestry gem. I have picked on jqTree as my desired solutions but I am happy to be persuaded to use an alternative as there seem to be a lot around but initially I would just like to be able to at least get a tree view working within Rails 6 Presumably I have to start by setting up jQuery, for which there are plenty of resources on how to do this so I guess this is more about how to get any jQuery component up and running in a Rails 6 app I guess I'll have to start with a jsx file and import some stuff and import some css into application.scss but just what this should look like I really am unsure of

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

So far I have setup jQuery according to the instructions here https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

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

I can confirm with a simple alert that this is all hooked up and working

我取得了更大的进步我没有下载 jqTree 文件，而是使用 yarn 安装 jqTree

I have made some more progress Instead of downloading the jqTree files, I have used yarn to install jqTree

更换

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

与

yarn add jqtree

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

and now I have sorted out the require which is as it should be without the ; So

require ;'jqTree/tree.jquery.js'

变成

require('jqtree')

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

also in my javascript/packs folder I have created a sortable.js file which did contain the following

require ;'jqTree/tree.jquery.js'

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

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

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

the ; in the require statement confuses me a lot but the console error was demanding it

现在看起来像这样

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

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

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

With the above code I get an reference error: data is not defined In a view I have the following code

<%=javascript_pack_tag("sortable")%>

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

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

The issue I have now is that my browser is reporting an error that tree is not a function.

在我的 application.css.scss 中有

In my application.css.scss I have

 *= require "jqtree.css"

哪个不起作用

推荐答案

我有一个详细的答案，我花了很长时间才整理好，我会在接下来的几天里用那个细节更新这个答案，但它开始于使用 jQuery、jQuery-ui 和组件本身(在本例中为 jqTree

I have a detailed answer for this that has taken me quite sometime to put together, I will update this answer with that detail over the coming days but it starts with getting everything hooked up properly with jQuery, jQuery-ui and the componment itself which in this case is jqTree

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

Yarn is definitely the answer Starting with the command line to add the relevant packages

yarn add jquery
yarn add jquery-ui
yarn add jqtree

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

Once the relevant yarn packages are installed I needed to make jQuery and jQuery-ui available for reasons that I am yet to fully comprehend, a simple require is not enough

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

我在 config/webpacker 文件夹中设置了我的 environment.js 文件，如下所示

I setup my environment.js file in the config/webpacker folder to look like this

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 文件夹中来使用链轮的可能性，有人建议我，但没有解释原因，将 webpacker 与链轮混合使用来提供 javascript 不是一个好主意.Webpacker 确实也有提供样式表的能力，但是我仍然更喜欢我的样式表由 app/assets 文件夹中的链轮提供，并像在 Rails 应用程序中传统那样使用样式表链接标签，因为测试证明这种方式更有效，所以混合以这种方式使用 webpacker 的链轮似乎不是问题.

After restarting my server I created a simple js file called test.js in the app/javascript/packs folder which as far as I can tell is where all javascript now resides although there is still the possibility of using sprockets by putting javascript in the assets/javascript folder, I have been advised, with no explanation as to why, that it is not a good idea to mix webpacker with sprockets for serving javascript. Webpacker does has the ability to serve stylesheets as well, however I still prefer my stylesheets to be served by sprockets in the app/assets folder and using stylesheet link tags as traditionally done in Rails apps as testing proved to be more efficient this way so mixing sprockets with webpacker in this way doesn't seem to be an issue.

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

I just chucked a simple alert message into the test.js file just to check that webpacker and jQuery was all hooked up properly.

所以 test.js 看起来像这样

So test.js looks like this

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

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

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

Then to use the javascript I just included a javascript pack tag in the view I wanted to use it in like so.

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

in a random edit.html.erb view

<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")%>

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

No need for paths or extensions to the file name, it just works!

我认为这种方法非常巧妙，原因有两个

I find this approach to be really neat for two reasons

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

1) I am not unnecessarily bloating out web pages by including page specific javascript in every single page by including it in the application.js file which gets included by default in the layout and therefore in every page.

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

2) I don't seem to have to worry about DOM loaded events and so far no issues with turbolinks interfering with it, although I suspect that may be more by luck than judgement and I may have to revise that thought in the future and make use of 'data-turbolinks-track': 'reload' option, but so far so good and this has not been necessary.

所以现在一切都已连接好并且可以工作了，是时候让 jqTree 组件与祖先 gem 一起工作，以便能够构建和组织站点的菜单项，

So now that all is hooked up and working it was time to make the jqTree component work with ancestry gem to be able to structure and organise the menu items for the site,

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

But up to this point it has been a simple matter of using yarn top install components and hooking up jQuery properly. I didn't use yarn initially and that led me to all sorts of problems resulting in my original question.

剩下的就是跟着...

这篇关于如何将 Rails 6 中的 JqTree 与 webpacker 集成，树不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！