almost 4 years ago

系統:

Mac OS X Yosemite 10.10.1
Ruby 2.1.5
Rails 4.1.8

設定步驟如下

1. Model 設定

app/models/post.rb

  ...
  scope :search, -> (search) { where('title LIKE ?', "%#{search}%") }
  ...

2. Controller 設定

app/controllers/posts_controller.rb

  ...
  def index
    @post = Post.new
    @posts = Post.search(params[:search]).order('created_at DESC').page(params[:page]).per(5)
    respond_to do |format|
      format.html
      format.js
    end
  end
  ...

3. View 設定

新增 app/views/posts/_post.html.slim

- unless posts.empty?
  ul.items.list-unstyled

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

        .vote-box.col-md-1.clearfix 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
        .post-actions.col-md-2

          =' link_button t(:show_post), url: post, color: 'link', size: 'xs'
          - if post.editable_by? current_user
            .btn-group

              button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false"

                =' t :actions
                span.caret

              ul.dropdown-menu.dropdown-menu-right role="menu"

                li

                  = link_to edit_post_path(post)
                    =' fa_icon('edit fw')
                    = t :edit_post
                li

                  = link_to post, method: 'delete', data: {confirm: t(:are_you_sure)}
                    =' fa_icon('trash fw')
                    = t :delete_post
  = paginate @posts

app/views/posts/index.html.slim

.container

  .toolbar.clearfix

    .new-post.pull-left

      = html_button t(:new_post), icon: 'plus', size: 'sm', 'data-toggle' => 'modal', 'data-target' => '#new_post_modal'
      = render 'new_post_modal', post: @post
    .search.pull-left

      = bootstrap_form_tag url: posts_path, method: 'get', html: { id: 'posts_search', enforce_utf8: false }, remote: true, layout: :inline do |f|
        = f.text_field :search, placeholder: t(:search) + '...', prepend: fa_icon('search'), hide_label: true, class: 'input-sm', value: params[:search]
        = hidden_field_tag :page, params[:page]
  .posts-list

    = render 'post', posts: @posts

新增 app/views/posts/index.js.erb

$('.posts-list').html("<%= escape_javascript(render 'post', posts: @posts) %>");

4. CSS 設定

app/assets/stylesheets/posts.css.scss

.toolbar {
  .new-post {
    margin-right: 20px;
  }
}
.posts-list {
  ul.items {
    background-color: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: none;
    margin: 10px 0;
    .post {
      border-bottom: 1px solid rgba(0,0,0,0.1);
      &:hover {
        background-color:rgba(51,204,191,0.05);
      }
      .post-timestamp {
        line-height: 24px;
        padding: 10px 20px;
        color: #666;
        font-size: 12px;
      }
      .post-title {
        line-height: 24px;
        padding: 10px 20px;
        color: #444;
        font-size: 16px;
      }
      .post-actions {
        line-height: 24px;
        text-align: right;
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
  }
}
...

5. JS 設定

app/assets/javascripts/base.js.coffee

  ...
  # search form
  $('#posts_search input').keyup ->
    $(this).closest("form").submit()
← Post 管理 - part 5 - Paginator Ruby on Rails 中使用 Google QR Code 生成器 →
 
comments powered by Disqus