How I go about refactoring the Bowls app to have a jQuery front-end.
Instead of sending HTTP requests via Rails to fetch and load individual pages, we will send AJAX requests to the server to fetch objects in JavaScript Object Notation (JSON) and append these objects to the page.
Draw routes to change a resource such as:
# config/routes.rb
resources :scraps
to:
# config/routes.rb
get 'scraps', to: 'scraps#index'
get 'scraps/:id', to: 'scraps#show'
post 'scraps/new', to: 'scraps#create'
patch 'scraps/:id', to: 'scraps#update'
After which we won't be loading separate pages, but rather rendering JSON and appending it to one page, /scraps
.
Set up the remaining routes for API endpoints.
For example in the scraps#index
action:
# app/controllers/scraps_controller.rb
def index
if !@bowl
@scraps = current_user.scraps.all
else
@scraps = @bowl.scraps
end
end
add render json: @scraps, status: 200
:
# app/controllers/scraps_controller.rb
def index
if !@bowl
@scraps = current_user.scraps.all
else
@scraps = @bowl.scraps
end
render json: @scraps, status: 200
end
to render JSON, not redirect to another page.
For scraps#show
add render json: @scrap, status: 200
.
To serialize Ruby objects into JSON objects, first add the gem:
# Gemfile
gem 'active_model_serializers'
Then run bundle install
.
To generate an ActiveModel::Serializer for Scrap
run the generator in your console:
$ rails g serializer scrap
Add scrap attributes to scrap_serializer.rb
:
# app/serializers/scrap_serializer.rb
class ScrapSerializer < ActiveModel::Serializer
attributes :id, :description, :category
end
Restart the Rails server, and navigate to /scraps
to see scraps rendered in JSON.
Make an ActiveModel:: Serializer for Bowl
:
$ rails g serializer bowl
Create associations by adding has_many :scraps
to bowl_serializer.rb
:
# app/serializers/bowl_serializer.rb
class BowlSerializer < ActiveModel::Serializer
attributes :id
has_many :scraps
end
And has_many :bowls
to scrap_serializre.rb
:
# app/serializers/scrap_serializer.rb
class ScrapSerializer < ActiveModel::Serializer
attributes :id, :description, :category
has_many :bowls
end
Create a BowlScrapSerializer
:
$ rails g serializer bowl_scrap
Add the description
attribute to and remove the id
attribute from this BowlScrapSerializer
:
# app/serializers/bowl_scrap_serializer.rb
class BowlScrapSerializer < ActiveModel::Serializer
attributes :description
end
Explicitly give the BowlSerializer
the BowlScrapSerializer
when rendering a Scrap
:
# app/serializers/bowl_serializer.rb
class BowlSerializer < ActiveModel::Serializer
attributes :id
has_many :scraps, serializer: BowlScrapSerializer
end
Like in this lesson here.
Resources
I used Markdown Editor and Markdown Cheatsheets [1] [2] to help create this document