使用Rails webpacker从Coffeescript到ES6,如何管理类?

问题描述 投票:0回答:1

我不是一个熟练的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 = $('#...

javascript webpack ecmascript-6 coffeescript
1个回答
0
投票

仅举一个例子:

© www.soinside.com 2019 - 2024. All rights reserved.