拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 Javascript/Jquery不适用于RubyonRail7?

Javascript/Jquery不适用于RubyonRail7?

白鹭 - 2022-02-25 2089 0 0

嗨,我是 RoR 的新手,我目前正在尝试为我的应用程序实作一些 javascript/jquery 代码,但我似乎无法让它作业。当我单击某个元素时,我什至无法在应用程序的控制台中打印出一个简单的“helloworld”,甚至无法在控制台上打印出一个简单的“hello”。我相信这可能是我的 javascript 代码没有被应用程序加载的一些问题。任何帮助或指导将不胜感激。

应用程序/资产/配置/manifest.js

 //= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js

//= require scripts

应用程序/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"

//= require styles

应用程序/javascript/控制器/application.js

import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application

export { application }

应用程序/控制器/index.js

// Import and register all your controllers from the importmap under controllers/*

import { application } from "controllers/application"

// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
// lazyLoadControllersFrom("controllers", application)

应用程序/javascript/posts.js

$(function(){

    $(".post-like").on("click", function(){
        console.log("hello")
    })
})

档案

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

ruby "3.0.3"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.0"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"
gem 'bootstrap-sass', '~> 3.4.1'
gem 'devise'

# image uploads to Amazon S3
gem 'carrierwave', '~> 2.2', '>= 2.2.2'
gem 'fog', '~> 2.2'

#image resizing
gem "mini_magick"

#font-awesome intergration
gem "font-awesome-rails"

# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

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

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
# gem "sassc-rails"

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
  
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"

  # local ENV vars
  gem 'figaro', '~> 1.2'
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

uj5u.com热心网友回复:

感谢奥斯卡的投入,它使我走向了正确的方向!您需要使用“data-controller="javascript 控制器的名称”来参考您的 javascript 档案。该视频帮助我将 javascript 实施到我的 Ruby On Rails 7 应用程序中。希望这个答案可以帮助与我在同一条船上的其他人。

https://www.youtube.com/watch?v=PtxZvFnL2i0&ab_channel=DavidHeinemeierHansson

uj5u.com热心网友回复:

Rails 7.0 使用importmap作为默认值,它与汇入功能一起使用。

你可以简单地添加import "./posts.js"app/javascript/application.js,它应该作业!

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *