我不是一个熟练的JavaScript专家。我正在将一个非常老的应用程序迁移到webpacker。我有很多这样的coffeescript文件:
class @SectionTable
constructor: ->
@table = $('#site_section')
@_dnd()
_dnd: ->
@table.tableDnD onDrop: (table, row) ->
data = $.tableDnD.serialize()
$.ajax
type: 'POST'
url: '/admin/sections/reorder'
data: data
$ -> new SectionTable()
我已经在webpacker中为我的Javascript文件创建了一个结构。
我有一些页面特定的脚本和一些全局脚本,这些脚本是我使用像这样的init.js文件初始化的
import timePicker from './timePicker.js';
import Redactor from './redactor.js';
(function init() {
const dtPicker = timePicker();
const redactor = Redactor();
document.addEventListener("turbolinks:load", () => {
dtPicker.init();
redactor.init();
});
}());
然后,在timePicker.js中,我初始化了单个组件
import 'bootstrap-datetime-picker/js/bootstrap-datetimepicker.js';
import 'bootstrap-datetime-picker/js/locales/bootstrap-datetimepicker.it.js';
const timePicker = () => {
const initDateTimePicker = () => {
const dateTime = $('.datetime');
if (dateTime.length > 0) {
$('.datetime').datetimepicker({
todayHighlight: true,
autoclose: true,
pickerPosition: 'bottom-left',
todayBtn: true,
format: 'hh:ii dd/mm/yyyy'
});
}
};
const init = () => {
initDateTimePicker();
};
return {
init,
};
};
export default timePicker;
我找不到在新逻辑中调整我的coffeescript对象的方法。上面的coffeescript非常简单,但是我也有一些复杂的对象,例如:
@@ Cover = {}
class Cover.Preview
constructor: ->
@elements = {} # preview elements, for each tab/preview box
@element = $('#cover_format')
@container = $('#cover_preview')
@button = $('#change_format')
@url = @element.data('url')
@setFormat()
@bindChange()
addElement: (element, position) ->
position = element.position
@elements[position] = element
bindChange: ->
@button.click (event) =>
event.preventDefault()
@setFormat()
$.ajax
url: "#{@url}?format=#{@format}"
dataType: 'html'
success: (html) =>
@container.html html
@rebindDrag()
@repopulate()
setFormat: -> @format = @element.val()
rebindDrag: ->
Cover.FormElement.init()
Cover.Preview.Tile.init()
repopulate: ->
for position, tile of Cover.Preview.Tile.all
tile.redraw Cover.preview.elements[position]
$ ->
Cover.preview = new Cover.Preview()
我知道我有两种方法可以做到这一点:
1)保留coffeescript并在webpacker中添加coffeescript文件加载器,但是我无法理解如何在init文件中(而不是像现在这样在coffee文件中)初始化我的coffee定义的对象]
2)从咖啡转换为ES6,我尝试使用在线工具,但结果如下:>
this.SectionTable = class SectionTable { constructor() { this.table = $('#dday_section'); this._dnd(); } _dnd() { return this.table.tableDnD({onDrop(table, row) { const data = $.tableDnD.serialize(); return $.ajax({ type: 'POST', url: '/admin/sections/reorder', data }); } }); } }; $(() => new SectionTable());
如何添加模块化方法?所以基本上我想在我的初始化文件中创建新的
SectionTable
。
我不是一个熟练的JavaScript专家。我正在将一个非常老的应用程序迁移到webpacker。我有很多这样的coffeescript文件:class @SectionTable构造函数:-> @table = $('#...
仅举一个例子: