Как сделать функцию JavaScript доступной глобально в Rails 6 с помощью Webpack?

Как новичок в Rails 6. Каждый раз, когда я нажимаю на ссылку «Рев», появляется следующая ошибка. Следующие файлы прикреплены ниже. Я просто хочу добавить пользовательский файл (demo.js) в свой код, чтобы я мог проверить поведение JavaScript в моем следующем коде. Поведение Java Script в Rails 5 отличается от Rails 6.

Пожалуйста, дайте мне лучшее решение, чтобы я мог решить свою проблему. Я перепробовал все ответы на переполнение стека.

Application.html.erb (просмотры / макеты / application.html.erb)

<!DOCTYPE html>
<html>
  <head>
    <title>SimpleCms</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    
  </head>

  <body>
    <%= yield %>
  </body>
</html>

demo.js (приложение / javascript / packs / demo.js)

function jsRoar(name) {
    alert('I am ' + name + '. Hear me roar!');
  }

application.js (приложение / javascript / packs / application.js)

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("packs/demo")

index.html.erb (просмотры / демонстрация / index.html.erb)

<h1>This is the index Page</h1>
<br/>
<%= link_to('All Subjects',subjects_path) %>

<%= link_to('Roar', '#', :onclick => "jsRoar('JavaScript'); return true;") %>

demo_controller.rb

class DemoController < ApplicationController
  
  layout 'application'
  
  def index
  render ('index')
  end

  def hello
  render ('hello')
  end

end

GEM файл

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.6'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.2'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.4.4'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: 
https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

ruby-on-rails webpack javascript ruby-on-rails-6 webpacker
person Hassam Saeed    schedule 09.08.2020    source источник
comment
Спасибо @Michael за редактирование.   -  person Hassam Saeed    schedule 26.08.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вы думаете о старом способе делать это. Я объяснил это здесь:

https://stackoverflow.com/a/56549843/1238868

Вот более современный способ делать то, что вы пытаетесь.

<%= link_to('Roar', '#', data: {roar: 'JavaScript'}) %>

В demo.js:

document.addEventListener("turbolinks:load", function() {
  document.querySelectorAll('[data-roar]').forEach(function(roaring_link) {
    roaring_link.addEventListener('click', function(event) {
      let name = roaring_link.dataset['roar']
       alert('I am ' + name + '. Hear me roar!');
       event.preventDefault();
       event.stopPropagation();
       return false;
    });
  });
});

Обратите внимание, что код в demo.js является самодостаточным, просто просматривает документ и присоединяет желаемые функции к ссылкам. Вы указываете, какие это ссылки, добавляя атрибут данных с данными, которые вы хотите передать своей функции javascript.

Это может показаться сложным, но после того, как вы освоите это, вы обнаружите, что ваш javascript действительно чистый и простой в обслуживании.

person Michael Chaney    schedule 20.08.2020
comment
Спасибо за ваш ответ. Это решает мою проблему. Пожалуйста, прочтите примечание в конце вопроса. - person Hassam Saeed; 23.08.2020
comment
@HassamSaeed Запрашивать голосование против политики SO: meta.stackoverflow.com/questions/323847/ Просто оставьте свой вопрос вопросом без посторонних вещей. - person Michael Chaney; 24.08.2020
comment
Хорошо, спасибо. - person Hassam Saeed; 25.08.2020
comment
не могли бы вы ответить на этот вопрос? stackoverflow.com/questions/63718529/ - person Hassam Saeed; 03.09.2020