12/08/2018, 14:56

Sử dụng Rails URL Helpers trong Javascript với JsRoutes

Khi chúng ta muốn sử dụng resource routing của Rails (ví dụ: "/blogs/new" hoặc "/blogs/2/edit", ...), chúng ta thường sử dụng path như new_blogs_path, blog_path(id). Nhưng khi chúng ta làm việc với javascript, thì sẽ không sử dụng các path như trong rails được, vậy thay vì sử dụng path route của ...

Khi chúng ta muốn sử dụng resource routing của Rails (ví dụ: "/blogs/new" hoặc "/blogs/2/edit", ...), chúng ta thường sử dụng path như new_blogs_path, blog_path(id). Nhưng khi chúng ta làm việc với javascript, thì sẽ không sử dụng các path như trong rails được, vậy thay vì sử dụng path route của rails, chúng ta sử dụng path bình thường như "/blogs/new" hoặc "/blogs/2/edit", .... Viết như vậy thì làm cho chúng ta rất khó khăn và không tốt cho lắm. Trong bài này, mình sẽ giới thiệu gem js-routes để giải quyết vấn đề trên.

Add gem vào trong Gemfile: gem "js-routes"

Sau đó chạy: bundle install Sau đó: add require vào trong application.js //= require js-routes

Nếu JsRoute không load lại trong javascript hoặc không chạy đươc, bạn phải clear asset pipeline cache: rake tmp:cache:clear

Basic

Trong route file: config/routes.rb: resources :posts

Trong javascript, bạn sẽ có thể viết routes như route path ở trong rails bình thường như sau:

Controller#Action JsRoutes function callColumn
posts#index Routes.posts_path()
posts#new Routes.new_post_path()
posts#create Routes.posts_path()
posts#show Routes.post_path(id)
posts#edit Routes.edit_post_path(id)
posts#update Routes.post_path(id)
posts#destroy Routes.post_path(id)
posts#destroy Routes.post_path(id)

Nested Routes

Chúng ta có routes như sau:

resources :posts do
  resources :comments
end

Trong javascript cũng viết tương tự như trong rails:

Controller#Action JsRoutes function callColumn
comments#index Routes.posts_path()
comments#new Routes.new_post_comment_path(post_id)
comments#create Routes.post_comments_path(post_id)
comments#show Routes.post_comment_path(post_id, comment_id)
comments#edit Routes.edit_post_comment_path(post_id, comment_id)
comments#update Routes.post_comment_path(post_id)
comments#destroy Routes.post_path(id)

The Magic of “to_param”

Trong trường hợp, bạn muốn sử dụng path có params như: /posts/awesome_gem, thì bạn có thể dùng to_param như sau: var path = Routes.post_path({to_param: "jsroutes_is_awesome"}); Kết quả: /posts/jsroutes_is_awesome

Bây giờ, chúng ta sẽ xem xét các ví dụ dưới đây:

// vào một file javascript nào đó và viết như sau: 
Routes.users_path() // => "/users"
Routes.user_path(1) // => "/users/1"
Routes.user_path(1, {format: 'json'}) // => "/users/1.json"
Routes.user_path(1, {anchor: 'profile'}) // => "/users/1#profile"
Routes.new_user_project_path(1, {format: 'json'}) // => "/users/1/projects/new.json"
Routes.user_project_path(1,2, {q: 'hello', custom: true}) // => "/users/1/projects/2?q=hello&custom=true"
Routes.user_project_path(1,2, {hello: ['world', 'mars']}) // => "/users/1/projects/2?hello%5B%5D=world&hello%5B%5D=mars"

// Sử dụng serialized object làm route
var google = {id: 1, name: "Google"};
Routes.company_path(google) // => "/companies/1"
var google = {id: 1, name: "Google", to_param: "google"};
Routes.company_path(google) // => "/companies/google"

Routes.post_path({to_param: "jsroutes_is_awesome"}); ///posts/jsroutes_is_awesome

Để chi tiết về cách sử dụng cũng như cách config khác, bạn có thể tham khoả thêm ở đây: https://github.com/railsware/js-routes https://www.sitepoint.com/rails-url-helpers-javascript-jsroutes/

0