Rails webpack js 並在 ajax 上刷新

Question

我有一個在 webpack js - app/javascript/packs/application.js中呈現的日歷模塊

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin ],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    defaultDate: '2018-01-12',
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    selectable: true,
    events: '/events.json',
    select: function(info) {
      $.getScript('/events/new', function(){
        $('#event_date_range').val(moment(info.start).format('YYYY-MM-DD HH:mm') + ' - ' + moment(info.end).format('YYYY-MM-DD HH:mm'));
        $('#start_date').val(moment(info.start).format('YYYY-MM-DD HH:mm'));
        $('#end_date').val(moment(info.end).format('YYYY-MM-DD HH:mm'));
      });
    }
  });

  calendar.render();
});

我有一個創建操作，並希望在成功回調時重新呈現日歷 - create.js.erb 。 我怎樣才能做到這一點？

Answer 1

注意：我假設您使用的是 Rails 6。我還假設您將format.js添加到您的創建操作中。

忘記create.js.erb ，這里不需要它。

此外，您不應將代碼放在app/javascript/packs/application.js中。

該文件中的注釋如下：

此文件由 Webpack以及此目錄中存在的任何其他文件自動編譯。 鼓勵您將實際應用程序邏輯放置在 app/javascript 中的相關結構中，並且僅使用這些包文件來引用該代碼，以便對其進行編譯。

這就是你將如何構建它：

1. 創建文件夾app/javascript/calendar並在該文件夾中創建一個index.js文件，其中包含您的代碼：

// import your calendar object (put it in a file calendar.js in the same folder)
import Calendar from './calendar';

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin ],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    defaultDate: '2018-01-12',
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    selectable: true,
    events: '/events.json',
    select: function(info) {
      $.getScript('/events/new', function(){
        $('#event_date_range').val(moment(info.start).format('YYYY-MM-DD HH:mm') + ' - ' + moment(info.end).format('YYYY-MM-DD HH:mm'));
        $('#start_date').val(moment(info.start).format('YYYY-MM-DD HH:mm'));
        $('#end_date').val(moment(info.end).format('YYYY-MM-DD HH:mm'));
      });
    }
  });

  // actually, you want to put that addEventListener on your form
  // more on 'ajax:success': https://guides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers
  document.body.addEventListener('ajax:success', function(event) {
    var detail = event.detail;
    var data = detail[0], status = detail[1], xhr = detail[2];

    if (status === 'OK') { // upon success
      // do something
      // re-render the calendar
      calendar.render();
    }
  })

  calendar.render();
});

注意我添加的部分：

  // actually, you want to put that addEventListener on your form
  // more on 'ajax:success': https://guides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers
  document.body.addEventListener('ajax:success', function(event) {
    var detail = event.detail;
    var data = detail[0], status = detail[1], xhr = detail[2];
    if (status === 'OK') { // upon success
      // do something
      // re-render the calendar
      calendar.render();
    }
  })

接下來，您創建您的包文件app/javascript/packs/calendar.js並在其中，您只需像這樣引用您的模塊：

// importing calendar module
import '../calendar';

現在 Webpack 將自動編譯您的文件。

剩下的是使用幫助程序javascript_pack_tag添加一個腳本標記，該標記引用由 webpack 編譯的命名包文件： <%= javascript_pack_tag 'calendar' %> 。 將其添加到視圖文件的底部（例如 index.html.erb）。

希望這可以幫助。

Answer 2

您可以使用addEvent方法將新事件添加到日歷

https://fullcalendar.io/docs/event-object

https://fullcalendar.io/docs/Calendar-addEvent-demo

在創建動作的成功回調中

$.ajax({
  ...
}).done(function (response) {
  // Add event to calendar
  calendar.addEvent({
    title:  response.title,
    start:  response.start_date,
    end:    response.end_date,
    allDay: response.all_day
  })
})