Как интегрировать JqTree в Rails 6 с веб-упаковщиком, дерево не является функцией

Question

Я действительно хочу знать, как интегрировать jqTree в качестве веб-пакета webpacker в мое приложение Rails 6

ОБНОВЛЕНИЕ: - Использование yarn add jqtree, кажется, волшебным образом очистило большую часть моего Проблемы, однако в настоящее время я сталкиваюсь с деревом, это не ошибка функции

Я использую драгоценный камень Ancestry для организации пунктов меню, и мне нужно перетаскивание javascript древовидного решения, которое будет работать хорошо с жемчужиной предков. Я выбрал jqTree в качестве желаемого решения, но я рад, что меня убедили использовать альтернативу, так как кажется, что вокруг много всего, но сначала я просто хотел бы иметь возможность по крайней мере получить представление дерева, работающее в Rails 6. Предположительно я Начнем с настройки jQuery, для которой есть множество ресурсов о том, как это сделать, поэтому я думаю, что это больше о том, как запустить и запустить любой компонент jQuery в приложении на Rails 6. Я должен начать с файла jsx, импортировать некоторые вещи и импортировать некоторые css в приложение. css, но только то, как это должно выглядеть, я действительно не уверен в

Пока у меня есть настройка jQuery в соответствии с инструкциями здесь https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

Я могу подтвердить простым предупреждением, что все это подключено и работает

Я добился еще большего прогресса вместо загрузки файлы jqTree, я использовал пряжу для установки jqTree

вместо

Я скачал файлы jqTree и распаковал m в папку с именем jqTree внутри моей папки javascript / packs

с

yarn add jqtree

и теперь я разобрал требование, которое должно быть без ; Поэтому

require ;'jqTree/tree.jquery.js'

становится

require('jqtree')

также в моей папке javascript / packs я создал сортируемый. js файл, который содержал следующий

require ;'jqTree/tree.jquery.js'

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

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

the; в операторе 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 %>

Проблема, с которой я столкнулся сейчас, заключается в том, что мой браузер сообщает об ошибке, что дерево не является функцией.

В моем приложении. css. s css У меня есть

 *= require "jqtree.css"

Что не работает

Answer 1

У меня есть подробный ответ на этот вопрос, который занял у меня довольно много времени, я обновлю этот ответ подробностями в ближайшие дни, но он начинается с правильного подключения всего с jQuery, jQuery - Пользовательский интерфейс и сам компонент, который в данном случае является jqTree

Прямо определенно является ответом Начиная с командной строки для добавления соответствующих пакетов

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

Я настраиваю свою среду. Файл js в папке config/webpacker выглядит следующим образом

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

После перезапуска сервера я создал простой файл js с именем test. js в В папке app/javascript/packs, которая, насколько я могу судить, сейчас находится все javascript, хотя все еще есть возможность использовать звездочки, поместив javascript в папку assets/javascript, у меня есть без объяснения причин было рекомендовано смешивать веб-упаковщик со звездочками для подачи javascript. Webpacker также имеет возможность обслуживать таблицы стилей, однако я все же предпочитаю, чтобы мои таблицы стилей обслуживались звездочками в папке app / assets и использованием тегов ссылок таблиц стилей, как это традиционно делается в приложениях Rails, так как тестирование оказалось более эффективным в этом смысле, поэтому смешивание В этом случае звездочки с веб-упаковщиком, похоже, не проблема.

Я просто забросил простое предупреждающее сообщение в тестовый файл. js, просто чтобы проверить, что веб-упаковщик и jQuery все правильно подключены .

Итак, проверьте. js выглядит следующим образом

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

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

Затем, чтобы использовать javascript, я просто включил тег javascript pack в представление, которое я хотел использовать в вот так.

при случайном редактировании. 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")%>

Нет необходимости в путях или расширениях имени файла, просто работает!

Я нахожу этот подход действительно аккуратным по двум причинам:

1) Я не излишне раздуваю веб-страницы, включая спецификацию страницы c javascript на каждой странице, включая ее в приложение. * Файл 1063 *, который по умолчанию включается в макет и, следовательно, в каждую страницу.

2) Мне не нужно беспокоиться о событиях, загруженных DOM, и до сих пор никаких проблем с турболинками, мешающими ему, хотя Я подозреваю, что это скорее удача, чем суждение, и мне, возможно, придется пересмотреть эту мысль в будущем и использовать опцию 'data-turbolinks-track': 'reload', но пока все хорошо, и в этом нет необходимости.

Так что теперь что все подключено и работает, пришло время заставить компонент jqTree работать с гемом предков, чтобы иметь возможность структурировать и организовывать пункты меню для сайта,

Но до этого момента все было просто использования компонентов для установки пряжи и правильного подключения jQuery. Изначально я не использовал пряжу, и это привело меня ко всевозможным проблемам, которые привели к моему первоначальному вопросу.

Остальное последовать ...