时间戳

首页 > 解决方案 > Rails webpack js和ajax刷新

javascript - Rails webpack js和ajax刷新

问题描述

我有一个在 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。我怎样才能做到这一点？

标签： javascriptruby-on-railswebpack

解决方案

注意：我假设您使用的是 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）。

希望这可以帮助。

推荐阅读