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/
