我在 Rails 6 应用程序中使用 JQuery 和 JQueryUI 时遇到困难。
JQuery 和 JqueryUI 都在 application.js 中工作
但是,JQueryUI 无法在视图中工作。我该如何让它在这两种情况下都起作用?我的代码如下。
I ran yarn add jquery
I ran yarn add jquery-ui-dist
In 环境.js:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
);
const aliasConfig = { 'jquery': 'jquery/src/jquery', 'jquery-ui': 'jquery-ui-dist/jquery-ui.js' };
environment.config.set('resolve.alias', aliasConfig);
module.exports = environment
In 应用程序.js:
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("jquery-ui");
require("custom/scripts")
我在 a 中测试了 JQuery 和 JQueryUI自定义/scripts.js and in 包/search.js
自定义/scripts.js加载到 application.js 中,如下所示:
$(document).ready(function(){
var test = $().jquery
console.log('custom/scripts.js JQuery version ==> ' + test);
var test_ui = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
console.log('custom/scripts.js UI version ==> ' + test_ui);
});
包/search.js加载到视图中
<%= javascript_pack_tag "search" %>
包/search.js看起来像这样(与 custom/scripts.js 完全相同):
$(document).ready(function(){
var test = $().jquery
console.log('packs/search.js JQuery version ==> ' + test);
var test_ui = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
console.log('packs/search.js UI version ==> ' + test_ui);
});
控制台中的结果:
custom/scripts.js JQuery version ==> 3.5.1
custom/scripts.js UI version ==> 1.12.1
packs/search.js JQuery version ==> 3.5.1
packs/search.js UI version ==> jQuery-UI not detected