我有一个关于Rails/webpacker/stimulus的项目。今天,我将资产管道迁移到了 webpacker。除了一个细节外,一切都很顺利。
Link_to调用销毁方法的按钮直接指向显示操作。此外,远程:真实标签不起作用。不会触发 ajax:beforeSend 操作,并且不再加载确认框。
<%= link_to sanitize("<i class='fa fa-trash'></i>"), dashboard_manager_dashboard_path(dashboard), remote: true, method: :delete, data: {
confirm: "sure?",
action: 'ajax:beforeSend->dm--dashboard#onBeforeDelete ajax:success->dm--dashboard#onDelete'
} %>
我在Stackoverflow上发现了许多类似的情况,大多数都提到Rails UJS没有正确加载,这里似乎也是如此。但是,这些示例中的问题不使用 webpack。
Stackoverflow上的一些帖子提到使用button_to而不是link_to。但这不是我正在寻找的解决方案,我希望能够使用 remote:true 和 ajax 回调。
有人看到我的设置中的缺陷吗?提前感谢您的任何建议!
应用.js:
import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
import * as ActiveStorage from 'activestorage';
Rails.start();
Turbolinks.start();
ActiveStorage.start();
import "../src/import-jquery";
import 'bootstrap/dist/js/bootstrap';
import 'tempusdominus-bootstrap-4';
import '../src/bootstrap-select.js';
import '../src/custom_calender.js';
import '../src/functions.js';
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start();
const context = require.context("controllers", true, /.js$/);
application.load(definitionsFromContext(context));
Package.json:
{
"name": "Youba",
"private": true,
"version": "1.0",
"dependencies": {
"@babel/core": "^7.4.4",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.2",
"activestorage": "^5.2.3",
"babel-loader": "^8.0.6",
"bootstrap": "^4.3.1",
"bootstrap-select": "^1.13.10",
"choices.js": "^7.0.0",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"jquery-ujs": "^1.2.2",
"moment": "^2.24.0",
"moment-timezone": "^0.5.11",
"popper": "^1.0.1",
"popper.js": "^1.14.7",
"rails-ujs": "^5.2.3",
"stimulus": "^1.1.1",
"tempusdominus-bootstrap-4": "^5.1.2",
"tempusdominus-core": "5.0.3",
"turbolinks": "^5.2.0",
"webpack": "^4.0.0",
"webpack-cli": "^3.3.2"
},
"devDependencies": {
"webpack-dev-server": "^3.2.1"
}
}
环境.js
const {environment} = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
Popper: ['popper.js', 'default']
}));
module.exports = environment;
这可能为时已晚,但我在尝试学习rails时遇到了类似的问题。我发现我没有包括这条线= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
在应用程序/资产/布局/应用程序.html.haml
我遇到了同样的问题,这是因为我在app/javascript/pack/
中创建了application.scss
如果我将.scss文件移动到样式表,一切正常(