12、构建可复用视图组件：Rails 中 Cells 的强大应用

构建可复用视图组件：Rails 中 Cells 的强大应用

1. 编写 Cells 功能

在将评论表单嵌入到事物页面并使其正常工作后，我们准备为该页面添加更多 UI 功能。计划在评论表单下方渲染一个最近评论列表，展示最后十条评论，并允许用户通过点击“更多”按钮加载更多评论。点击按钮后，将通过 AJAX 调用加载十条更多评论，并将其追加到现有列表中。

首先，使用一个 cell 来表示评论，在页面中嵌入最后十条评论列表，代码如下：

concept "comment/cell", collection: @thing.comments.limit(10)

在 app/concepts/comment/cell.rb 中创建评论 cell，代码骨架如下：

class Comment::Cell < Cell::Concept
  property :created_at
  property :body
  property :user

  def show
    render
  end
end

接下来，在 app/concepts/comments/views/show.haml 中编写视图，展示单个评论。为了显示多个评论并利用 Foundation 的网格，需要为每个评论 cell 添加相应的 CSS 类。

评论 cell 的 show.haml 视图如下