over 3 years ago

系統:

Mac OS X Yosemite 10.10.1
Ruby 2.1.5
Rails 4.1.8

相關連結

Acts As Votable ( https://github.com/ryanto/acts_as_votable )

設定步驟如下

1. Gemfile 設定

添加必要的 gem 套件至 Gemfile 檔中

# Use acts_as_votable for vote
gem 'acts_as_votable', '~> 0.10.0'

2. Database Migrations

$ rails generate acts_as_votable:migration
$ rake db:migrate

3. Model 設定

app/models/post.rb

class Post < ActiveRecord::Base
  ...
  acts_as_votable
  ...
end

app/models/user.rb

class User < ActiveRecord::Base
  ...
  acts_as_voter
  ...
end

4. Controller 設定

新增 app/controllers/votes_controller.rb

class VotesController < ApplicationController
  before_filter :set_votable, only: [:upvote, :downvote]

  def upvote
    if current_user
      # TODO: up a vote with user

      @votable.vote_by(voter: current_user)
      respond_to { |format| format.js } if current_user.voted_up_on? @votable
    else
      respond_to do |format|
        format.js { render js: "alert('#{t(:login_first)}')" }
      end
    end
  end

  def downvote
    # TODO: down a vote with user

    @votable.vote_by(voter: current_user, vote: 'bad')
    respond_to do |format|
      format.js { render 'upvote' }
    end if current_user.voted_down_on? @votable
  end

  private

    def set_votable
      @votable = params[:model].classify.constantize.find(params[:id])
    end
end

5. Route 設定

config/routes.rb

Rails.application.routes.draw do
  ...
  ## Votes
  get ':model/:id/vote/up' => 'votes#upvote', as: :upvote
  get ':model/:id/vote/down' => 'votes#downvote', as: :downvote
  ...
end

6. View 設定

要放 vote box 的 html 檔

...

- @posts.each do |post|
  li.post.clearfix

    .vote-box.col-md-1 data-id=post.id

      = render 'votes/vote_box', votable: post
    .post-timestamp.col-md-2

      = l post.created_at, format: :long
    .post-title.col-md-7= post.title
...

app/views/votes/_vote_box.html.slim

- if current_user && current_user.voted_up_on?(votable)
  a.upvote.voted href=downvote_path(votable.class.name.downcase, votable.id) data-remote="true"
    .symbol= fa_icon 'heart'
    .count
      span= votable.get_upvotes.size
- else
  a.upvote href=upvote_path(votable.class.name.downcase, votable.id) data-remote="true"
    .symbol= fa_icon 'heart'
    .count
      span= votable.get_upvotes.size

app/views/votes/upvote.js.erb

$('.vote-box[data-id="<%= @votable.id %>').html("<%= escape_javascript(render 'votes/vote_box', votable: @votable) %>");

7. CSS 設定

app/assets/stylesheets/_vote.css.scss

.upvote {
  float: left;
  -webkit-border-radius: 3px 3px 3px 3px;
          border-radius: 3px 3px 3px 3px;
  cursor: pointer;
  background: #EDECEB;
  margin: 10px 0;
  box-shadow: 0 1px 0 0 rgba(83,69,64,0.3),0 1px 1px 0 rgba(0,0,0,0.2);
  text-decoration: none;
  color: #534540;
  padding: 0 8px;
  font-size: 12px;
  line-height: 24px;
  .symbol {
    float: left;
    margin-right: 5px;
  }
  .count {
    float: left;
  }
  &:hover, &:focus, &.voted {
    text-decoration: none;
    color: #da552f;
  }
}

8. I18n 設定

config/locales/base.zh-TW.yml

zh-TW:
  ...
  # vote
  login_first: '請先登入!'
← Deploy Rails 4 app to a VPS with Capistrano 3 Post 管理 - part 3 - Translate Permalink →
 
comments powered by Disqus