Cách thêm kích thích vào ứng dụng Ruby on Rails

Nếu bạn đang làm việc với một dự án Ruby on Rails , các yêu cầu của bạn có thể bao gồm một số tương tác với HTML được tạo bởi các mẫu chế độ xem của bạn. Nếu vậy, bạn có một số lựa chọn về cách triển khai tương tác này.

---

Ví dụ: bạn có thể triển khai một khung JavaScript như React hoặc Ember . Nếu các yêu cầu của bạn bao gồm trạng thái xử lý ở phía client hoặc nếu bạn lo lắng về các vấn đề hiệu suất liên quan đến các truy vấn thường xuyên tới server , thì việc chọn một trong các khung này có thể có ý nghĩa. Nhiều Ứng dụng Trang Đơn (SPA) áp dụng phương pháp này.

Tuy nhiên, có một số cân nhắc cần lưu ý khi triển khai một khuôn khổ quản lý trạng thái và cập nhật thường xuyên ở phía client :

1. Có thể xảy ra các yêu cầu về tải và chuyển đổi - những thứ như phân tích cú pháp JavaScript, tìm nạp và chuyển đổi JSON sang HTML - để hạn chế hiệu suất.
2. Commit với một khuôn khổ có thể liên quan đến việc viết nhiều mã hơn trường hợp sử dụng cụ thể của bạn yêu cầu, đặc biệt nếu bạn đang tìm kiếm các cải tiến JavaScript quy mô nhỏ.
3. Trạng thái được quản lý ở cả phía client và server có thể dẫn đến sự trùng lặp các nỗ lực và làm tăng diện tích bề mặt cho các lỗi.

Để thay thế, group tại Basecamp (cùng group đã viết Rails) đã tạo ra Stimulus.js , được họ mô tả là “một khung JavaScript khiêm tốn cho HTML mà bạn đã có”. Stimulus nhằm nâng cao ứng dụng Rails hiện đại bằng cách làm việc với HTML được tạo từ phía server . State nằm trong Mô hình đối tượng tài liệu (DOM) và khung cung cấp các cách tương tác tiêu chuẩn với các phần tử và sự kiện trong DOM. Nó hoạt động song song với Turbolinks ( có trong Rails 5+ theo mặc định) để cải thiện hiệu suất và thời gian tải với mã bị giới hạn và phạm vi cho một mục đích được xác định rõ ràng.

Trong hướng dẫn này, bạn sẽ cài đặt và sử dụng Stimulus để xây dựng trên một ứng dụng Rails hiện có cung cấp cho người đọc thông tin về cá mập. Ứng dụng đã có một mô hình để xử lý dữ liệu về cá mập, nhưng bạn sẽ thêm một tài nguyên lồng ghép cho các bài đăng về cá mập riêng lẻ, cho phép user xây dựng cơ sở suy nghĩ và ý kiến về cá mập. Phần này chạy gần như song song với Cách tạo Tài nguyên lồng nhau cho Ứng dụng Ruby on Rails , ngoại trừ việc ta sẽ sử dụng JavaScript để thao tác vị trí và giao diện của các bài đăng trên trang. Ta cũng sẽ thực hiện một cách tiếp cận hơi khác để xây dựng mô hình bài đăng.

Yêu cầu

Để làm theo hướng dẫn này, bạn cần :

• Máy local hoặc server phát triển chạy Ubuntu 18.04. Máy phát triển của bạn phải có user không phải root có quyền quản trị và firewall được cấu hình với ufw . Để biết hướng dẫn về cách cài đặt điều này, hãy xem hướng dẫn Cài đặt server ban đầu với Ubuntu 18.04 của ta .
• Node.js và npm được cài đặt trên máy local hoặc server phát triển của bạn. Hướng dẫn này sử dụng Node.js version 10.16.3 và npm version 6.9.0 . Để biết hướng dẫn về cách cài đặt Node.js và npm trên Ubuntu 18.04, hãy làm theo hướng dẫn trong phần “Cài đặt bằng PPA” của Cách cài đặt Node.js trên Ubuntu 18.04 .
• Ruby, rbenv và Rails được cài đặt trên máy local hoặc server phát triển của bạn, làm theo các Bước 1-4 trong Cách cài đặt Ruby on Rails với rbenv trên Ubuntu 18.04 . Hướng dẫn này sử dụng Ruby 2.5.1 , rbenv 1.1.2 và Rails 5.2.3 .
• SQLite đã được cài đặt và một ứng dụng thông tin cá mập cơ bản đã được tạo, theo hướng dẫn trongCách tạo ứng dụngRuby on Rails .

Bước 1 - Tạo mô hình lồng nhau

Bước đầu tiên của ta sẽ là tạo mô hình Post lồng nhau, mô hình này ta sẽ kết hợp với mô hình Shark hiện có của ta . Ta sẽ thực hiện việc này bằng cách tạo các liên kết Active Record giữa các mô hình của ta : các bài đăng sẽ thuộc về những con cá mập cụ thể và mỗi con cá mập có thể có nhiều bài đăng.

Để bắt đầu, hãy chuyển đến folder sharkapp mà bạn đã tạo cho dự án Rails của bạn trong yêu cầu :

cd sharkapp 

Để tạo mô hình Post của ta , ta sẽ sử dụng lệnh rails generate với trình tạo model . Gõ lệnh sau để tạo mô hình:

rails generate model Post body:text shark:references 

Với body:text , ta đang nói Rails bao gồm một body lĩnh vực trong posts bảng database - bảng mà bản đồ để các Post mô hình. Ta cũng bao gồm :references từ khóa :references , cài đặt mối liên kết giữa mô hình Shark và Post . Cụ thể, điều này sẽ đảm bảo một khóa ngoại đại diện cho mỗi mục nhập cá mập trong database sharks được thêm vào database posts .

Khi bạn đã chạy lệnh, bạn sẽ thấy kết quả xác nhận các tài nguyên mà Rails đã tạo cho ứng dụng. Trước khi tiếp tục, bạn có thể kiểm tra file di chuyển database của bạn để xem xét mối quan hệ hiện đang tồn tại giữa các mô hình và bảng database của bạn. Sử dụng lệnh sau để xem nội dung của file , đảm bảo thay thế dấu thời gian trên file di chuyển của bạn cho những gì được hiển thị ở đây:

cat db/migrate/20190805132506_create_posts.rb 

Bạn sẽ thấy kết quả sau:

Output
class CreatePosts < ActiveRecord::Migration[5.2]   def change     create_table :posts do |t|       t.text :body       t.references :shark, foreign_key: true        t.timestamps     end   end end 

Như bạn thấy , bảng này bao gồm một cột cho foreign keys cá mập. Khóa này sẽ có dạng model_name _id - trong trường hợp của ta là shark _id .

Rails cũng đã cài đặt mối quan hệ giữa các mô hình ở những nơi khác. Hãy xem mô hình Post mới được tạo bằng lệnh sau:

cat app/models/post.rb 

Output
class Post < ApplicationRecord   belongs_to :shark end 

Các belongs_to bộ hiệp hội lập một mối quan hệ giữa các mô hình trong đó một trường hợp duy nhất của mô hình tuyên bố thuộc về một trường hợp duy nhất của mô hình được đặt tên. Trong trường hợp ứng dụng của ta , điều này nghĩa là một bài đăng thuộc về một con cá mập duy nhất.

Mặc dù Rails đã cài đặt liên kết belongs_to trong mô hình Post của ta , ta cũng cần chỉ định một liên kết has_many trong mô hình Shark của ta để mối quan hệ đó hoạt động bình thường.

Để thêm liên kết has_many vào mô hình Shark , hãy mở app/models/shark.rb bằng nano hoặc editor bạn quen dùng :

nano app/models/shark.rb 

Thêm dòng sau vào file để cài đặt mối quan hệ giữa cá mập và bài đăng:

class Shark < ApplicationRecord   has_many :posts   validates :name, presence: true, uniqueness: true   validates :facts, presence: true end 

Một điều đáng suy nghĩ ở đây là điều gì sẽ xảy ra với các bài đăng khi một con cá mập cụ thể bị xóa. Ta có thể không muốn các bài đăng liên quan đến một con cá mập bị xóa vẫn còn trong database . Để đảm bảo bất kỳ bài đăng nào liên quan đến một con cá mập nhất định đều bị loại bỏ khi con cá mập đó bị xóa, ta có thể bao gồm tùy chọn dependent với liên kết.

Thêm mã sau vào file đảm bảo rằng hành động destroy đối với một con cá mập nhất định sẽ xóa mọi bài đăng liên quan:

class Shark < ApplicationRecord   has_many :posts, dependent: :destroy   validates :name, presence: true, uniqueness: true   validates :facts, presence: true end 

Khi bạn đã thực hiện xong những thay đổi này, hãy lưu file . Nếu bạn đang làm việc với nano , hãy thực hiện việc này bằng cách nhấn CTRL+X , Y , sau đó ENTER .

Đến đây bạn có một mô hình được tạo cho các bài đăng của bạn , nhưng bạn cũng cần một bộ điều khiển để điều phối giữa dữ liệu trong database của bạn và HTML được tạo và trình bày cho user .

Bước 2 - Tạo bộ điều khiển cho tài nguyên lồng nhau

Tạo bộ điều khiển bài viết sẽ liên quan đến việc cài đặt một tuyến tài nguyên lồng nhau trong file định tuyến chính của ứng dụng và tạo chính file bộ điều khiển để chỉ định các phương thức ta muốn liên kết với các hành động cụ thể.

Để bắt đầu, hãy mở file config/routes.rb của bạn để cài đặt mối quan hệ giữa các tuyến tài nguyên của bạn:

nano config/routes.rb 

Hiện tại, file có dạng như sau:

Rails.application.routes.draw do   resources :sharks    root 'sharks#index'   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html end 

Ta muốn tạo mối quan hệ phụ thuộc mối quan hệ giữa cá mập và tài nguyên đăng. Để thực hiện việc này, hãy cập nhật khai báo tuyến đường của bạn để biến :sharks thành nguồn root của :posts . Cập nhật mã trong file để trông giống như sau:

Rails.application.routes.draw do   resources :sharks do     resources :posts   end   root 'sharks#index'   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html end 

Lưu file khi bạn hoàn tất chỉnh sửa.

Tiếp theo, tạo một file mới có tên app/controllers/posts_controller.rb cho controller:

nano app/controllers/posts_controller.rb 

Trong file này, ta sẽ xác định các phương pháp mà ta sẽ sử dụng để tạo và hủy các bài đăng riêng lẻ. Tuy nhiên, vì đây là một mô hình lồng nhau, ta cũng cần tạo một biến version local , @shark , mà ta có thể sử dụng để liên kết các bài đăng cụ thể với các cá mập cụ thể.

Đầu tiên, ta có thể tự tạo lớp PostsController , cùng với hai phương thức private : get_shark , cho phép ta tham chiếu đến một con cá mập cụ thể và post_params , cho phép ta truy cập thông tin do user gửi theo phương thức params .

Thêm mã sau vào file :

class PostsController < ApplicationController   before_action :get_shark     private    def get_shark     @shark = Shark.find(params[:shark_id])   end    def post_params     params.require(:post).permit(:body, :shark_id)   end end 

Như vậy, bạn có các phương pháp để lấy các trường hợp cá mập cụ thể mà các bài đăng của bạn sẽ được liên kết, sử dụng khóa :shark_id và dữ liệu mà user đang nhập để tạo bài đăng. Cả hai đối tượng này bây giờ sẽ có sẵn cho các phương thức bạn sẽ xác định để xử lý việc tạo và hủy bài đăng.

Tiếp theo, phía trên các phương thức private , hãy thêm mã sau vào file để xác định các phương thức create và destroy của bạn:

. . .   def create     @post = @shark.posts.create(post_params)   end    def destroy     @post = @shark.posts.find(params[:id])     @post.destroy      end . . . 

Các phương thức này liên kết các bản @post với các bản @shark cụ thể và sử dụng các phương thức thu thập khả dụng với ta khi ta tạo liên kết has_many giữa cá mập và bài đăng. Các phương pháp như find và create cho phép ta nhắm đến tập hợp các bài đăng liên quan đến một con cá mập cụ thể.

Tệp đã hoàn thành sẽ giống như sau:

class PostsController < ApplicationController   before_action :get_shark     def create     @post = @shark.posts.create(post_params)   end    def destroy     @post = @shark.posts.find(params[:id])     @post.destroy      end    private    def get_shark     @shark = Shark.find(params[:shark_id])   end    def post_params     params.require(:post).permit(:body, :shark_id)   end end 

Lưu file khi bạn hoàn tất chỉnh sửa.

Với bộ điều khiển và mô hình của bạn tại chỗ, bạn có thể bắt đầu suy nghĩ về các mẫu chế độ xem của bạn và cách bạn sẽ tổ chức HTML được tạo ứng dụng của bạn .

Bước 3 - Sắp xếp lại các chế độ xem với các phần

Bạn đã tạo một mô hình Post và bộ điều khiển, vì vậy điều cuối cùng cần nghĩ đến từ góc độ Rails sẽ là các khung nhìn hiển thị và cho phép user nhập thông tin về cá mập. Lượt xem cũng là nơi bạn có cơ hội xây dựng khả năng tương tác với Stimulus.

Trong bước này, bạn sẽ vạch ra quan điểm và các phần của bạn , đây sẽ là điểm khởi đầu cho công việc của bạn với Stimulus.

Chế độ xem sẽ hoạt động như cơ sở cho các bài đăng và tất cả các phần liên quan đến bài đăng là chế độ xem sharks/show .

Mở tập tin:

nano app/views/sharks/show.html.erb 

Hiện tại, file có dạng như sau:

<p id="notice"><%= notice %></p>  <p>   <strong>Name:</strong>   <%= @shark.name %> </p>  <p>   <strong>Facts:</strong>   <%= @shark.facts %> </p>  <%= link_to 'Edit', edit_shark_path(@shark) %> | <%= link_to 'Back', sharks_path %> 

Khi ta tạo mô hình Post , ta đã chọn không tạo lượt xem cho các bài đăng của bạn , vì ta sẽ xử lý chúng thông qua chế độ xem sharks/show của ta . Vì vậy, theo quan điểm này, điều đầu tiên ta sẽ giải quyết là làm thế nào ta sẽ chấp nhận đầu vào của user cho các bài đăng mới và cách ta sẽ hiển thị lại bài đăng cho user .

Lưu ý: Để có giải pháp thay thế cho cách tiếp cận này, vui lòng xem Cách tạo tài nguyên lồng nhau cho ứng dụng Ruby on Rails , cài đặt chế độ xem bài đăng bằng cách sử dụng đầy đủ các phương thức Tạo, Đọc, Cập nhật, Xóa (CRUD) được xác định trong bộ điều khiển bài đăng. Để thảo luận về các phương pháp này và cách chúng hoạt động, vui lòng xem Bước 3 củaCách tạo ứng dụng Ruby on Rails .

Thay vì xây dựng tất cả các chức năng của ta vào chế độ xem này, ta sẽ sử dụng các phần tử - các mẫu có thể sử dụng lại phục vụ một chức năng cụ thể. Ta sẽ tạo một phần cho các bài đăng mới và một phần khác để kiểm soát cách các bài đăng được hiển thị lại cho user . Xuyên suốt, ta sẽ suy nghĩ về cách và nơi ta có thể sử dụng Stimulus để điều khiển sự xuất hiện của các bài đăng trên trang, vì mục tiêu của ta là kiểm soát việc trình bày các bài đăng bằng JavaScript.

Đầu tiên, bên dưới thông tin về cá mập, hãy thêm tiêu đề <h2> cho các bài đăng và một dòng để hiển thị một phần được gọi là sharks/posts :

. . .  <p>   <strong>Facts:</strong>   <%= @shark.facts %> </p>  <h2>Posts</h2> <%= render 'sharks/posts' %> . . .  

Điều này sẽ hiển thị một phần với trình tạo biểu mẫu cho các đối tượng bài đăng mới.

Tiếp theo, bên dưới liên kết Edit và Back , ta sẽ thêm phần kiểm soát việc trình bày các bài viết cũ hơn trên trang. Thêm các dòng sau vào file để hiển thị một phần được gọi là sharks/all :

<%= link_to 'Edit', edit_shark_path(@shark) %> | <%= link_to 'Back', sharks_path %>  <div>   <%= render 'sharks/all' %> </div> 

Phần tử <div> sẽ hữu ích khi ta bắt đầu tích hợp Stimulus vào file này.

Sau khi bạn hoàn thành các chỉnh sửa này, hãy lưu file . Với những thay đổi bạn đã thực hiện ở phía Rails, bây giờ bạn có thể chuyển sang cài đặt và tích hợp Stimulus vào ứng dụng của bạn .

Bước 4 - Cài đặt Stimulus

Bước đầu tiên khi sử dụng Stimulus sẽ là cài đặt và cấu hình ứng dụng của ta để hoạt động với nó. Điều này sẽ bao gồm việc bảo đảm ta có dependencies chính xác, kể cả Sợi quản lý gói và Webpacker , viên ngọc đó sẽ cho phép ta làm việc với JavaScript trước xử lý và bundler webpack . Với những phụ thuộc này, ta sẽ có thể cài đặt Stimulus và sử dụng JavaScript để thao tác các sự kiện và phần tử trong DOM.

Hãy bắt đầu bằng cách cài đặt Yarn. Trước tiên, hãy cập nhật danh sách gói của bạn:

sudo apt update 

Tiếp theo, thêm khóa GPG cho repository Debian Yarn:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - 

Thêm repository vào các nguồn APT của bạn:

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list 

Cập nhật database gói với các gói Yarn mới được thêm vào:

sudo apt update 

Và cuối cùng, cài đặt Yarn:

sudo apt install yarn 

Sau khi cài đặt yarn , bạn có thể chuyển sang thêm đá quý webpacker vào dự án của bạn .

Mở Gemfile của dự án của bạn, nó liệt kê các phụ thuộc gem cho dự án của bạn:

nano Gemfile 

Bên trong file , bạn sẽ thấy các Turbolinks được bật theo mặc định:

. . .  # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' . . .  

Turbolinks được thiết kế để cải thiện hiệu suất bằng cách tối ưu hóa tải trang: thay vì để các nhấp chuột vào liên kết chuyển đến một trang mới, Turbolinks chặn các sự kiện nhấp chuột này và đưa ra yêu cầu trang bằng cách sử dụng JavaScript và HTML không đồng bộ (AJAX) . Sau đó, nó thay thế phần nội dung của trang hiện tại và hợp nhất nội dung của các phần <head> , trong khi window JavaScript và các đối tượng document và phần tử <html> vẫn tồn tại giữa các lần hiển thị. Điều này giải quyết một trong những nguyên nhân chính gây ra thời gian tải trang chậm: reload các tài nguyên CSS và JavaScript.

Theo mặc định, ta nhận được Turbolinks trong Gemfile của bạn , nhưng ta cần thêm đá quý webpacker để có thể cài đặt và sử dụng Stimulus. Bên dưới đá quý turbolinks , thêm webpacker :

. . .  # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' gem 'webpacker', '~> 4.x' . . .  

Lưu file khi bạn hoàn tất.

Tiếp theo, thêm đá quý vào gói dự án của bạn bằng lệnh bundle :

bundle 

Thao tác này sẽ tạo một file Gemfile.lock mới - bản ghi cuối cùng của các viên ngọc và version cho dự án của bạn.

Tiếp theo, cài đặt gem trong ngữ cảnh gói của bạn bằng lệnh thực thi bundle exec sau:

bundle exec rails webpacker:install 

Khi quá trình cài đặt hoàn tất, ta cần thực hiện một điều chỉnh nhỏ đối với file bảo mật nội dung của ứng dụng. Điều này là do thực tế là ta đang làm việc với Rails 5.2+, môi trường bị hạn chế của Chính sách bảo mật nội dung (CSP) , nghĩa là các tập lệnh duy nhất được phép trong ứng dụng phải từ các nguồn tin cậy .

Mở config/initializers/content_security_policy.rb , là file mặc định mà Rails cung cấp cho ta để xác định các policy bảo mật trên toàn ứng dụng:

nano config/initializers/content_security_policy.rb 

Thêm các dòng sau vào cuối file để cho phép webpack-dev-server - server phục vụ gói webpack của ứng dụng của ta - làm nguồn root được phép:

. . .  Rails.application.config.content_security_policy do |policy|   policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035' if Rails.env.development? end 

Điều này sẽ đảm bảo webpacker-dev-server được công nhận là nguồn nội dung tin cậy .

Lưu file khi bạn thực hiện xong thay đổi này.

Bằng cách cài đặt webpacker , bạn đã tạo hai folder mới trong folder app của dự án, folder chứa mã ứng dụng chính của bạn. Thư mục mẹ mới, app/javascript , sẽ là nơi chứa mã JavaScript của dự án của bạn và nó sẽ có cấu trúc như sau:

Output
├── javascript │   ├── controllers │   │   ├── hello_controller.js │   │   └── index.js │   └── packs │       └── application.js 

Thư mục app/javascript sẽ chứa hai folder con: app/javascript/packs , chứa các điểm nhập webpack của bạn và app/javascript/controllers , nơi bạn sẽ xác định các bộ điều khiển Kích thích của bạn . Lệnh bundle exec mà ta vừa sử dụng sẽ tạo folder app/javascript/packs , nhưng ta cần cài đặt Stimulus để folder app/javascript/controllers được tự động tạo.

Khi đã cài đặt webpacker , bây giờ ta có thể cài đặt Stimulus bằng lệnh sau:

bundle exec rails webpacker:install:stimulus 

Bạn sẽ thấy kết quả như sau, cho biết rằng quá trình cài đặt đã thành công:

Output
. . .  success Saved lockfile. success Saved 5 new dependencies. info Direct dependencies └─ stimulus@1.1.1 info All dependencies ├─ @stimulus/core@1.1.1 ├─ @stimulus/multimap@1.1.1 ├─ @stimulus/mutation-observers@1.1.1 ├─ @stimulus/webpack-helpers@1.1.1 └─ stimulus@1.1.1 Done in 8.30s. Webpacker now supports Stimulus.js 🎉 

Bây giờ ta đã cài đặt Stimulus và các folder chính mà ta cần làm việc với nó tại chỗ. Trước khi chuyển sang viết bất kỳ mã nào, ta cần thực hiện một số điều chỉnh cấp ứng dụng để hoàn tất quá trình cài đặt.

Trước tiên, ta cần thực hiện điều chỉnh đối với app/views/layouts/application.html.erb đảm bảo rằng mã JavaScript của ta có sẵn và mã được xác định trong điểm nhập webpacker chính của ta , app/javascript/packs/application.js , chạy mỗi khi tải trang.

Mở file đó:

nano app/views/layouts/application.html.erb 

Thay đổi thẻ javascript_include_tag sau thành javascript_ pack _tag để tải app/javascript/packs/application.js :

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

Lưu file khi bạn đã thực hiện thay đổi này.

Tiếp theo, mở app/javascript/packs/application.js :

nano app/javascript/packs/application.js 

Ban đầu, file sẽ trông như thế này:

. . .  console.log('Hello World from Webpacker')  import "controllers" 

Xóa mã bảng soạn sẵn ở đó và thêm mã sau để tải file bộ điều khiển kích thích của bạn và khởi động version ứng dụng:

. . .  import { Application } from "stimulus" import { definitionsFromContext } from "stimulus/webpack-helpers"  const application = Application.start() const context = require.context("../controllers", true, /\.js$/) application.load(definitionsFromContext(context)) 

Mã này sử dụng các phương thức trình trợ giúp webpack để yêu cầu bộ điều khiển trong folder app/javascript/controllers và tải ngữ cảnh này để sử dụng trong ứng dụng của bạn.

Lưu file khi bạn hoàn tất chỉnh sửa.

Đến đây bạn đã cài đặt Stimulus và sẵn sàng sử dụng trong ứng dụng của bạn . Tiếp theo, ta sẽ xây dựng các phần tử mà ta đã tham chiếu trong chế độ xem show sharks/posts - sharks/posts và sharks/all - sử dụng bộ điều khiển Kích thích, mục tiêu và hành động .

Bước 5 - Sử dụng Stimulus trong Rails Partials

Phần sharks/posts của ta sẽ sử dụng trình trợ giúp form_with form để tạo một đối tượng bài đăng mới. Nó cũng sẽ sử dụng ba khái niệm cốt lõi của Stimulus: bộ điều khiển, mục tiêu và hành động. Các khái niệm này hoạt động như sau:

• Bộ điều khiển là các lớp JavaScript được định nghĩa trong module JavaScript và được xuất dưới dạng đối tượng mặc định của module . Thông qua bộ điều khiển, bạn có quyền truy cập vào các phần tử HTML cụ thể và version Ứng dụng kích thích được xác định trong app/javascript/packs/application.js .
• Mục tiêu cho phép bạn tham chiếu các phần tử HTML cụ thể theo tên và được liên kết với các bộ điều khiển cụ thể.
• Các hành động kiểm soát cách các sự kiện DOM được bộ điều khiển xử lý và cũng được liên kết với các bộ điều khiển cụ thể. Chúng tạo kết nối giữa phần tử HTML được liên kết với bộ điều khiển, các phương thức được xác định trong bộ điều khiển và trình nghe sự kiện DOM.

Về phần mình, trước tiên ta sẽ xây dựng một biểu mẫu như ta thường làm bằng cách sử dụng Rails. Sau đó, ta sẽ thêm bộ điều khiển Kích thích, hành động và mục tiêu vào biểu mẫu để sử dụng JavaScript để kiểm soát cách các bài đăng mới được thêm vào trang.

Đầu tiên, hãy tạo một file mới cho một phần:

nano app/views/sharks/_posts.html.erb 

Bên trong file , hãy thêm mã sau để tạo một đối tượng bài đăng mới bằng cách sử dụng trình trợ giúp form_with :

        <%= form_with model: [@shark, @shark.posts.build] do |form| %>                 <%= form.text_area :body, placeholder: "Your post here" %>                 <br>                 <%= form.submit %>         <% end %> 

Lúc này, biểu mẫu này hoạt động giống như một biểu mẫu Rails điển hình, sử dụng trình trợ giúp form_with để xây dựng một đối tượng bài đăng với các trường được xác định cho mô hình Post . Do đó, biểu mẫu có một trường cho post :body , trường này ta đã thêm một placeholder với dấu nhắc điền vào một bài đăng.

Ngoài ra, biểu mẫu được mở rộng phạm vi để tận dụng các phương pháp thu thập đi kèm với sự liên kết giữa mô hình Shark và Post . Trong trường hợp này, đối tượng bài đăng mới được tạo từ dữ liệu do user gửi sẽ thuộc về bộ sưu tập các bài đăng có liên quan đến cá mập mà ta hiện đang xem.

Mục tiêu của ta bây giờ là thêm một số bộ điều khiển Kích thích, sự kiện và hành động để kiểm soát cách dữ liệu bài đăng được hiển thị trên trang. User cuối cùng sẽ gửi dữ liệu bài đăng và thấy nó được đăng lên trang nhờ hành động Kích thích.

Đầu tiên, ta sẽ thêm một bộ điều khiển vào biểu mẫu được gọi là posts trong phần tử <div> :

<div data-controller="posts">         <%= form_with model: [@shark, @shark.posts.build] do |form| %>                  <%= form.text_area :body, placeholder: "Your post here" %>                  <br>                  <%= form.submit %>         <% end %> </div> 

Đảm bảo rằng bạn thêm thẻ đóng <div> để định phạm vi bộ điều khiển đúng cách.

Tiếp theo, ta sẽ đính kèm một hành động vào biểu mẫu sẽ được kích hoạt bởi sự kiện gửi biểu mẫu. Hành động này sẽ kiểm soát cách hiển thị thông tin nhập của user trên trang. Nó sẽ tham chiếu đến một phương thức addPost mà ta sẽ xác định trong các bài viết Bộ điều khiển kích thích:

<div data-controller="posts">         <%= form_with model: [@shark, @shark.posts.build], data: { action: "posts#addBody" } do |form| %>         . . .                   <%= form.submit %>         <% end %> </div> 

Ta sử dụng tùy chọn :data với form_with để gửi hành động Kích thích làm thuộc tính dữ liệu HTML bổ sung. Bản thân hành động có một giá trị được gọi là bộ mô tả hành động được tạo thành từ những điều sau:

• Sự kiện DOM để lắng nghe . Ở đây, ta đang sử dụng sự kiện mặc định được liên kết với các phần tử biểu mẫu, gửi đi, vì vậy ta không cần chỉ định sự kiện trong chính bộ mô tả. Để biết thêm thông tin về các cặp phần tử / sự kiện phổ biến, hãy xem tài liệu Kích thích .
• Mã định danh bộ điều khiển , trong trường hợp của ta posts .
• Phương thức mà sự kiện sẽ gọi . Trong trường hợp của ta , đây là phương thức addBody mà ta sẽ xác định trong bộ điều khiển.

Tiếp theo, ta sẽ đính kèm mục tiêu dữ liệu vào đầu vào của user được xác định trong phần tử :body <textarea> addBody , vì ta sẽ sử dụng giá trị đã nhập này trong phương thức addBody .

Thêm tùy chọn sau :data vào phần tử :body <textarea> :

<div data-controller="posts">         <%= form_with model: [@shark, @shark.posts.build], data: { action: "posts#addBody" } do |form| %>                 <%= form.text_area :body, placeholder: "Your post here", data: { target: "posts.body" } %> . . . 

Giống như các bộ mô tả hành động, các mục tiêu Kích thích có các bộ mô tả đích , bao gồm bộ định danh bộ điều khiển và tên mục tiêu. Trong trường hợp này, posts là bộ điều khiển của ta , và body là mục tiêu riêng của bạn .

Là một bước cuối cùng, ta sẽ thêm một mục tiêu dữ liệu cho các đầu vào body các giá trị để user sẽ có thể nhìn thấy bài viết của họ ngay khi họ được nộp.

Thêm phần tử <ul> với mục tiêu add bên dưới biểu mẫu và bên trên <div> :

. . .         <% end %>   <ul data-target="posts.add">   </ul>  </div> 

Như với mục tiêu body , bộ mô tả mục tiêu của ta bao gồm cả tên của bộ điều khiển và mục tiêu - trong trường hợp này, hãy add .

Phần đã hoàn thành sẽ trông như thế này:

<div data-controller="posts">         <%= form_with model: [@shark, @shark.posts.build], data: { action: "posts#addBody"} do |form| %>                 <%= form.text_area :body, placeholder: "Your post here", data: { target: "posts.body" } %>                 <br>                 <%= form.submit %>         <% end %>   <ul data-target="posts.add">   </ul>  </div> 

Sau khi thực hiện những thay đổi này, bạn có thể lưu file .

Đến đây bạn đã tạo một trong hai phần mà bạn đã thêm vào mẫu xem sharks/show . Tiếp theo, bạn sẽ tạo thứ hai, sharks/all , sẽ hiển thị tất cả các bài đăng cũ hơn từ database .

Tạo một file mới có tên _all.html.erb trong folder app/views/sharks/ _all.html.erb app/views/sharks/ :

nano app/views/sharks/_all.html.erb 

Thêm mã sau vào file để lặp lại qua bộ sưu tập các bài đăng được liên kết với cá mập đã chọn:

<% for post in @shark.posts  %>     <ul>          <li class="post">             <%= post.body %>         </li>      </ul>     <% end %> 

Mã này sử dụng vòng lặp for để lặp lại qua từng trường hợp bài đăng trong tập hợp các đối tượng bài đăng được liên kết với một con cá mập cụ thể.

Bây giờ ta có thể thêm một số hành động Kích thích vào phần này để kiểm soát sự xuất hiện của các bài đăng trên trang. Cụ thể, ta sẽ thêm các hành động sẽ kiểm soát lượt ủng hộ và liệu bài đăng có hiển thị trên trang hay không

Tuy nhiên, trước khi làm điều đó, ta cần thêm một viên đá quý vào dự án của bạn để có thể làm việc với các biểu tượng Font Awesome , ta sẽ sử dụng để đăng ký lượt ủng hộ. Mở cửa sổ terminal thứ hai và chuyển đến folder dự án sharkapp của bạn.

Mở Gem file :

nano Gemfile 

Bên dưới viên ngọc webpacker của bạn, thêm dòng sau để bao gồm viên ngọc font-awesome-rails trong dự án:

. . .  gem 'webpacker', '~> 4.x' gem 'font-awesome-rails', '~>4.x' . . .  

Lưu và đóng file .

Tiếp theo, cài đặt gem:

bundle install 

Cuối cùng, mở biểu định kiểu chính của ứng dụng của bạn, app/assets/stylesheets/application.css :

nano app/assets/stylesheets/application.css 

Thêm dòng sau để bao gồm các kiểu của Font Awesome trong dự án của bạn:

. . .  *  *= require_tree .  *= require_self  *= require font-awesome  */ 

Lưu và đóng file . Đến đây bạn có thể đóng cửa sổ terminal thứ hai của bạn .

Quay lại một phần app/views/sharks/_all.html.erb bạn, giờ đây bạn có thể thêm hai button_tags với các hành động Kích thích liên quan, sẽ được kích hoạt trên các sự kiện nhấp chuột. Một nút sẽ cung cấp cho user tùy chọn tán thành một bài đăng và nút kia sẽ cung cấp cho họ tùy chọn xóa bài đăng đó khỏi chế độ xem trang.

Thêm mã sau vào app/views/sharks/_all.html.erb :

<% for post in @shark.posts  %>     <ul>          <li class="post">             <%= post.body %>             <%= button_tag "Remove Post", data: { controller: "posts", action: "posts#remove" } %>             <%= button_tag "Upvote Post", data: { controller: "posts", action: "posts#upvote" } %>         </li>      </ul>     <% end %> 

Thẻ nút cũng có tùy chọn :data , vì vậy ta đã thêm vào bài đăng của bạn Bộ điều khiển kích thích và hai hành động: remove và upvote . , trong bộ mô tả hành động, ta chỉ cần xác định bộ điều khiển và phương thức của bạn , vì sự kiện mặc định được liên kết với các phần tử nút là nhấp chuột. Nhấp vào từng nút này sẽ kích hoạt các phương pháp remove và upvote tương ứng được xác định trong bộ điều khiển của ta .

Lưu file khi bạn đã chỉnh sửa xong.

Thay đổi cuối cùng mà ta sẽ thực hiện trước khi chuyển sang xác định bộ điều khiển của ta là đặt mục tiêu dữ liệu và hành động để kiểm soát cách thức và thời điểm các sharks/all phần sẽ được hiển thị.

Mở lại mẫu show , nơi mà lệnh gọi ban đầu để hiển thị sharks/all hiện được xác định:

nano app/views/sharks/show.html.erb 

Ở cuối file , ta có một phần tử <div> hiện giống như sau:

. . .  <div>   <%= render 'sharks/all' %> </div> 

Đầu tiên, thêm bộ điều khiển vào phần tử <div> để phạm vi hành động và mục tiêu:

. . .  <div data-controller="posts">   <%= render 'sharks/all' %> </div> 

Tiếp theo, thêm một nút để kiểm soát sự xuất hiện của một phần trên trang. Nút này sẽ kích hoạt phương thức showAll trong trình điều khiển bài đăng của ta .

Thêm nút bên dưới <div> phần tử và phía trên render tuyên bố:

. . .  <div data-controller="posts">  <button data-action="posts#showAll">Show Older Posts</button>    <%= render 'sharks/all' %> 

, ta chỉ cần xác định bộ điều khiển posts của ta và phương thức showAll ở đây - hành động sẽ được kích hoạt bởi một sự kiện nhấp chuột.

Tiếp theo, ta sẽ thêm một mục tiêu dữ liệu. Mục tiêu của việc đặt mục tiêu này là kiểm soát sự xuất hiện của một phần trên trang. Cuối cùng, ta muốn user chỉ xem các bài đăng cũ hơn nếu họ đã chọn tham gia bằng cách nhấp vào nút Show Older Posts .

Do đó, ta sẽ đính kèm mục tiêu dữ liệu được gọi là show cho sharks/all một phần và đặt kiểu mặc định của nó thành visibility:hidden . Điều này sẽ ẩn một phần trừ khi user chọn xem nó bằng cách nhấp vào nút.

Thêm phần tử <div> với mục tiêu show và định nghĩa style bên dưới nút và phía trên câu lệnh kết xuất một phần:

. . .  <div data-controller="posts">  <button data-action="posts#showAll">Show Older Posts</button>  <div data-target="posts.show" style="visibility:hidden">   <%= render 'sharks/all' %> </div> 

Đảm bảo thêm thẻ đóng </div> .

Mẫu show đã hoàn thành sẽ trông như thế này:

<p id="notice"><%= notice %></p>  <p>   <strong>Name:</strong>   <%= @shark.name %> </p>  <p>   <strong>Facts:</strong>   <%= @shark.facts %> </p>  <h2>Posts</h2>  <%= render 'sharks/posts' %>  <%= link_to 'Edit', edit_shark_path(@shark) %> | <%= link_to 'Back', sharks_path %>  <div data-controller="posts">  <button data-action="posts#showAll">Show Older Posts</button>  <div data-target="posts.show" style="visibility:hidden">   <%= render 'sharks/all' %> </div> </div> 

Lưu file khi bạn hoàn tất chỉnh sửa.

Với mẫu này và các phần liên quan của nó đã hoàn thành, bạn có thể chuyển sang tạo bộ điều khiển bằng các phương pháp bạn đã tham chiếu trong các file này.

Bước 6 - Tạo bộ điều khiển kích thích

Việc cài đặt Stimulus đã tạo folder app/javascript/controllers , đây là nơi mà webpack đang tải ngữ cảnh ứng dụng của ta , vì vậy ta sẽ tạo bộ điều khiển bài đăng của bạn trong folder này. Bộ điều khiển này sẽ bao gồm từng phương pháp mà ta đã tham chiếu trong bước trước:

• addBody() , để thêm bài viết mới.
• showAll() , để hiển thị các bài đăng cũ hơn.
• remove() , để xóa các bài viết khỏi chế độ xem hiện tại.
• upvote() , để đính kèm biểu tượng ủng hộ vào bài đăng.

Tạo một file có tên posts_controller.js trong folder app/javascript/controllers :

nano app/javascript/controllers/posts_controller.js 

Đầu tiên, ở đầu file , hãy mở rộng lớp Controller hợp của Stimulus:

import { Controller } from "stimulus"  export default class extends Controller { } 

Tiếp theo, thêm các định nghĩa đích sau vào file :

. . . export default class extends Controller {     static targets = ["body", "add", "show"] } 

Xác định mục tiêu theo cách này sẽ cho phép ta truy cập chúng trong các phương pháp của ta với cái this. target-name Target Thuộc tính this. target-name Target , cung cấp cho ta phần tử mục tiêu phù hợp đầu tiên. Vì vậy, ví dụ: để trùng với mục tiêu dữ liệu body được xác định trong mảng mục tiêu của ta , ta sẽ sử dụng this. body Target . Thuộc tính này cho phép ta thao tác những thứ như giá trị đầu vào hoặc kiểu css.

Tiếp theo, ta có thể xác định phương thức addBody , phương thức này sẽ kiểm soát sự xuất hiện của các bài viết mới trên trang. Thêm đoạn mã sau vào bên dưới định nghĩa đích để xác định phương pháp này:

. . . export default class extends Controller {     static targets = [ "body", "add", "show"]      addBody() {         let content = this.bodyTarget.value;         this.addTarget.insertAdjacentHTML('beforebegin', "<li>" + content + "</li>");     } } 

Phương thức này xác định một biến content với từ khóa let và đặt nó bằng với chuỗi đầu vào bài đăng mà user đã nhập vào biểu mẫu bài đăng. Nó thực hiện điều này nhờ mục tiêu dữ liệu body mà ta đã gắn vào phần tử <textarea> trong biểu mẫu của ta . Sử dụng this.bodyTarget để đối sánh với phần tử này, sau đó ta có thể sử dụng thuộc tính value được liên kết với phần tử đó để đặt giá trị của content khi user đầu vào bài đăng đã nhập.

Tiếp theo, phương thức thêm đầu vào bài đăng này vào mục tiêu add mà ta đã thêm vào phần tử <ul> bên dưới trình tạo biểu mẫu trong phần sharks/posts . Nó thực hiện điều này bằng cách sử dụng phương thức Element.insertAdjacentHTML() , sẽ chèn nội dung của bài đăng mới, được đặt trong biến content , trước phần tử mục tiêu add . Ta cũng đã đưa bài đăng mới vào phần tử <li> để các bài đăng mới xuất hiện dưới dạng các mục danh sách có dấu đầu dòng.

Tiếp theo, bên dưới phương thức addBody , ta có thể thêm phương thức showAll , phương thức này sẽ kiểm soát sự xuất hiện của các bài đăng cũ hơn trên trang:

. . .  export default class extends Controller { . . .     addBody() {         let content = this.bodyTarget.value;         this.addTarget.insertAdjacentHTML('beforebegin', "<li>" + content + "</li>");     }      showAll() {         this.showTarget.style.visibility = "visible";     }  } 

Ở đây, ta lại sử dụng cái this. target-name Target Thuộc tính this. target-name Target để trùng với mục tiêu show của ta , được gắn vào phần tử <div> với các sharks/all part. Ta đã đặt cho nó một phong cách mặc định, "visibility:hidden" , vì vậy trong phương pháp này, ta chỉ cần thay đổi phong cách thành "visible" . Điều này sẽ hiển thị một phần cho những user đã chọn xem các bài đăng cũ hơn.

Dưới đây showAll , ta sẽ tiếp thêm một upvote phương pháp, cho phép user “phiếu bầu tán thành” bài viết trên trang bằng cách gắn miễn phí Font tạo ảnh vui nhộn check-circle biểu tượng cho một bài cụ thể.

Thêm mã sau để xác định phương pháp này:

. . .  export default class extends Controller { . . .       showAll() {         this.showTarget.style.visibility = "visible";     }      upvote() {         let post = event.target.closest(".post");         post.insertAdjacentHTML('beforeend', '<i class="fa fa-check-circle"></i>');     }  } 

Ở đây, ta đang tạo một biến post sẽ nhắm đến phần tử <li> gần nhất với post lớp - lớp mà ta đã đính kèm với mỗi phần tử <li> trong lần lặp vòng lặp của ta trong sharks/all . Thao tác này sẽ nhắm đến bài đăng gần nhất và thêm biểu tượng check-circle ngay bên trong phần tử <li> , sau phần tử con cuối cùng của nó.

Tiếp theo, ta sẽ sử dụng một phương pháp tương tự để ẩn các bài đăng trên trang. Thêm mã sau vào bên dưới phương thức upvote để xác định phương thức remove :

. . .  export default class extends Controller { . . .       upvote() {         let post = event.target.closest(".post");         post.insertAdjacentHTML('beforeend', '<i class="fa fa-check-circle"></i>');     }      remove() {         let post = event.target.closest(".post");         post.style.visibility = "hidden";     } } 

, biến post của ta sẽ nhắm đến phần tử <li> gần nhất với post lớp. Sau đó, nó sẽ đặt thuộc tính khả năng hiển thị thành "hidden" để ẩn bài đăng trên trang.

Tệp bộ điều khiển đã hoàn thành bây giờ sẽ giống như sau:

import { Controller } from "stimulus"  export default class extends Controller {      static targets = ["body", "add", "show"]      addBody() {         let content = this.bodyTarget.value;         this.addTarget.insertAdjacentHTML('beforebegin', "<li>" + content + "</li>");     }      showAll() {         this.showTarget.style.visibility = "visible";     }      upvote() {         let post = event.target.closest(".post");         post.insertAdjacentHTML('beforeend', '<i class="fa fa-check-circle"></i>');     }      remove() {         let post = event.target.closest(".post");         post.style.visibility = "hidden";     } }  

Lưu file khi bạn hoàn tất chỉnh sửa.

Với bộ điều khiển Kích thích của bạn tại chỗ, bạn có thể chuyển sang thực hiện một số thay đổi cuối cùng đối với chế độ xem index và thử nghiệm ứng dụng của bạn .

Bước 7 - Sửa đổi Chế độ xem Chỉ mục và Kiểm tra Ứng dụng

Với một thay đổi cuối cùng đối với chế độ xem index cá mập, bạn sẽ sẵn sàng thử nghiệm ứng dụng của bạn . Chế độ xem index là root của ứng dụng mà bạn đã đặt trong Bước 4 củaCách xây dựng ứng dụng Ruby on Rails .

Mở tập tin:

nano app/views/sharks/index.html.erb 

Thay cho các trình trợ giúp link_to đã được tạo tự động để ta hiển thị và tiêu diệt cá mập, ta sẽ sử dụng các trình trợ giúp button_to . Điều này sẽ giúp ta làm việc với mã HTML được tạo thay vì nội dung JavaScript Rails mặc định, mà ta đã chỉ định mà ta sẽ không sử dụng trong Bước 1 nữa, khi ta thay đổi javascript_include_tag thành javascript_pack_tag trong app/views/layouts/application.html.erb .

Thay thế trình trợ giúp link_to hiện có trong file bằng trình trợ giúp button_to sau:

. . .    <tbody>     <% @sharks.each do |shark| %>       <tr>         <td><%= shark.name %></td>         <td><%= shark.facts %></td>         <td><%= button_to 'Show', shark_path(:id => shark.id), :method => :get %></td>         <td><%= button_to 'Edit', edit_shark_path(:id => shark.id), :method => :get %></td>         <td><%= button_to 'Destroy', shark_path(:id => shark.id), :method => :delete %></td>       </tr>     <% end %>   </tbody> . . .  

Những trình trợ giúp này hoàn thành nhiều thứ giống như các đối tác link_to của họ, nhưng trình trợ giúp Destroy hiện dựa vào HTML được tạo chứ không phải JavaScript mặc định của Rails.

Lưu file khi bạn hoàn tất chỉnh sửa.

Đến đây bạn đã sẵn sàng để kiểm tra ứng dụng của bạn .

Trước tiên, hãy chạy di chuyển database của bạn:

rails db:migrate 

Tiếp theo, khởi động server của bạn. Nếu bạn đang làm việc local , bạn có thể thực hiện việc này bằng lệnh sau:

rails s 

Nếu bạn đang làm việc trên một server phát triển, bạn có thể khởi động ứng dụng bằng:

rails s --binding=your_server_ip 

Điều hướng đến trang đích của ứng dụng trong trình duyệt của bạn. Nếu bạn đang làm việc local , đây sẽ là localhost:3000 hoặc http:// your_server_ip :3000 nếu bạn đang làm việc trên một server .

Bạn sẽ thấy trang đích sau:

Nhấp vào Hiển thị sẽ đưa bạn đến chế độ xem show cho con cá mập này. Tại đây, bạn sẽ thấy một biểu mẫu để điền vào một bài đăng:

Trong biểu mẫu bài đăng, hãy nhập “Những con cá mập này thật đáng sợ!”:

Nhấp vào Tạo bài đăng . Đến đây bạn sẽ thấy bài đăng mới trên trang:

Bạn có thể thêm một bài mới khác, nếu bạn muốn. Lần này, hãy nhập “Những con cá mập này thường bị xuyên tạc trong các bộ phim” và nhấp vào Tạo bài đăng :

Để kiểm tra chức năng của tính năng Hiển thị các bài đăng cũ hơn , ta cần rời khỏi trang này, vì Great White của ta hiện không có bất kỳ bài đăng nào cũ hơn những bài ta vừa thêm.

Nhấp vào Quay lại để quay lại trang chính, sau đó nhấp vào Hiển thị để quay lại trang đích Great White:

Nhấp vào Hiển thị bài đăng cũ hơn sẽ hiển thị cho bạn các bài đăng bạn đã tạo:

Đến đây bạn có thể ủng hộ một bài đăng bằng cách nhấp vào nút Đăng ủng hộ :

Tương tự, nhấp vào Xóa bài đăng sẽ ẩn bài đăng:

Đến đây bạn đã xác nhận bạn có một ứng dụng Rails đang hoạt động sử dụng Stimulus để kiểm soát cách hiển thị các tài nguyên bài đăng lồng nhau trên các trang cá mập riêng lẻ. Bạn có thể sử dụng điều này làm điểm khởi đầu cho sự phát triển và thử nghiệm trong tương lai với Stimulus.

Kết luận

Stimulus đại diện cho một giải pháp thay thế khả thi để làm việc với rails-ujs , JQuery và các framework như React và Vue.

Như đã thảo luận trong phần giới thiệu, Stimulus có ý nghĩa nhất khi bạn cần làm việc trực tiếp với HTML do server tạo ra. Nó nhẹ và nhằm mục đích làm cho mã - đặc biệt là HTML - tự giải thích ở mức độ cao nhất có thể. Nếu bạn không cần quản lý trạng thái ở phía khách hàng, thì Stimulus có thể là một lựa chọn tốt.

Nếu bạn quan tâm đến cách tạo tài nguyên lồng nhau mà không có tích hợp Kích thích, bạn có thể tham khảo Cách tạo tài nguyên lồng nhau cho ứng dụng Ruby on Rails .

Để biết thêm thông tin về cách bạn sẽ tích hợp React với ứng dụng Rails, hãy xem Cách cài đặt dự án Ruby on Rails với React Frontend .

---

---

Các tin liên quan