从Coffeescapet到使用Rails webpacker的ES6，如何管理类

Question

我不是一个熟练的javascript专家。我正在将一个非常旧的应用程序迁移到webpacker。我有很多像这样的咖啡脚本文件：

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;

我找不到在新逻辑中调整coffescript对象的方法。上面的coffeescript非常简单，但我也有一些复杂的对象，比如：

@封面=｛｝

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( 在webpacker中保留coffeescript并添加coffeesccript文件加载器，但我不明白如何在Init文件中初始化我的咖啡定义对象(而不是像现在这样在咖啡文件中(

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());

如何添加模块化方法？因此，基本上我想在init文件中创建新的SectionTable。

Answer 1

仅举一个例子：

import $ from 'jquery';
export class SectionTable {
constructor() {
this.table = $('#site_section');
this._dnd();
}
_dnd() {
this.table.tableDnD.onDrop((table, row) => {
const data = $.tableDnD.serialize();
$.ajax({
type: 'POST',
url: '/admin/sections/reorder',
data: data
});
});
}
}
// if you need a single instance like seems to from your code
export default new SectionTable();

// otherfile.js
// this is just to show you how you can import only some classes from a file when
// export is used
import SectionTableSingleTon, { SectionTable } from './somewhere/SectionTable';
const sectionTable = new SectionTable();

只要小心使用对象方法的this。如果您需要传递它，请在构造函数中绑定它。

constructor() {
this.someMethod = this.someMethod.bind(this);
}
attachListener(){
$('button').click(this.someMethod);
}
somemethod(){
// correct this
}

而且你不需要在艾姆斯模块中再活下去了