Nested Comment Treads in ROR
建立一个嵌套的评论
- 建立数据库结构和嵌套视图(使用Stimulus取元素和绑event)
- 可以删除评论,可以对嵌套视图的层数进行控制.
- 用Ajax代替完全的刷新页面。
- 删除一个评论,但不丢失它的子评论。。。。
- 给嵌套评论添加pagination。
视频1
https://gorails.com/episodes/nested-comment-threads-in-rails-part-1?autoplay=1
目标:建立数据库结构,和嵌套视图。
方法概览:
1. 建立一个可以自我关联的comment的表结构。
2. 建立partial模版_comment和_form
3. 设置routes, 出现post/1/comments/2这样的url
4. 新建controller:
class Posts::CommentsController < CommentsController
//内部添加before_action :set_commentable, 通过params[:post_id]找到对应的@post实例。
5. 新建CommentsController类,增加create方法
6. 在show页面添加form渲染和comment渲染
7. 基本结构已经做出来了,下面进行嵌套评论的设计,代码在视图层完成。
在comment模版上增加form模版:
- 在_form上添加parent_id的输入框<input>,parent_id自动得到值,因此设置为不可见type='hidden'
- 子评论form默认不可见,需要点击‘回复reply’才出现。comment模版增加这个功能。这里使用Stimulus来取元素(reply 链接)并绑定click事件(添加/移除 form模版)
8. 需要在父评论的下面显示新增子评论。而不是直接显示在所有评论最下方。因此需要修改show视图。
- show视图只显示非子评论。即渲染comment时,增加一个筛选parent_id: nil。
- 在comment模版中,渲染出当前评论的子评论<%= render comment.comments %>
- 还是comment模版,它渲染的form模版,传入的变量改为comment.commentable。
rails new -m template.rb nested_coments cd nested_comments rails g scaffold Post title body:text rails g model Comments user:references commentable:references{polymorphic}:index parent_id:integer body:text rails db:migrate
解释:
commentable:references{polymorphic}:index 用于一个model belongs_to从属多个models.即Polymorphic.
生成了commentable_type:string, commentable_id:integer,以及这两个列组成的index.
class Post < ApplicationRecord
has_many :comments, as: :commentable
end class Comment < ApplicationRecord
belongs_to :user
belongs_to :commentable, polymorphic: true
belongs_to :parent, optional: true, class_name: "Comment"
//optional和class_name用于内部Comment关联,并且这是可选的无需存在验证。✅ def comments
//搜索某个post下的一个父评论的所有它的子评论。
//搜索条件1: comment记录的commentable_type和commentable_id指向post,
//因为添加了commentable的index索引,所以使用commentabel: commentable
//搜索条件2: comment记录的子评论,用parent_id即可得到。
Comment.where(commentable: commentable, parent_id: id)
end
end
解释Polymorphic 关联:
一个model可以属于belongs_to多个其他model。
commentable_id, commentable_type已经由model产生。
@comment.commentable_id是@post的
Nested Comment Treads in ROR的更多相关文章
- 前端备忘录 — IE 的条件注释
CSS hack 由于不同厂商的浏览器,比如 Internet Explorer,Safari,Mozilla Firefox, Chrome 等,或者是同一厂商的浏览器的不同版本,如 IE6 和 I ...
- javascript 之正则匹配HTML
正则表达式 <(\S*?) [^>]*>.*?</\1>|<.*? /> 匹配 <html>hello</html>|<a> ...
- ccs6.0使用问题记录
ccs6.0使用问题记录 彭会锋 1 编译过程中提示warning " Description Resource Path Location Type #9-D nested commen ...
- 关于IE条件注释(译)
本文翻译自此篇文章.翻译纯属业余. 许多网站为了确保他们的站点能够在不同的浏览器上有不同的显示效果而使用特征检测,一些传统的网站使用其他技术,诸如在服务器或客户端上使用脚本去检测浏览器类型.在这里我们 ...
- 统计C/C++代码行数
近日在写一个统计项目中C/C++文件(后缀名:C/CPP/CC/H/HPP文件)代码行数的小程序.给定包含C/C++代码的目录,统计目录里所有C/C++文件的总代码行数.有效代码行数.注释行数.空白行 ...
- 算法语言Scheme修订6报告 R6RS简体中文翻译
算法语言Scheme修订6报告 R6RS简体中文翻译 来源 https://r6rs.mrliu.org/ MICHAEL SPERBERR. KENT DYBVIG, MATTHEW FLATT ...
- CocoSourcesCS 2
CocoSourcesCS 2 /*------------------------------------------------------------------------- DFA.cs - ...
- Css:Conditional comments 条件注释
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx http://www.quirksmode.org/css/condcom.h ...
- 【转帖】从 Oracle 到 PostgreSQL ,某保险公司迁移实践 技术实践
从 Oracle 到 PostgreSQL ,某保险公司迁移实践 http://www.itpub.net/2019/11/08/4108/ 信泰人寿保险股份有限公司 摘要:去O一直是金融保险行业永恒 ...
随机推荐
- Git和Jenkins日记之没有新提交代码
日期:2017/3/9 今天查看Jenkins运行代码记录的日志时,发现并没有昨天新提交的代码,然后查看了Jenkins的测试项目中所有的自动化测试用例, 并没有看到昨天新提交的测试用例,又查看了gi ...
- 数组中的元素 增加push用法 unshift() 方法 和减少pop() 方法 shift() 和其他位置增删 splice() 方法 join() 方法 reverse() 方法 sort() 方法
push用法 push 英 [pʊʃ] 美 [pʊʃ] vt. 推,推动; vt. 按; 推动,增加; 对…施加压力,逼迫; 说服; n. 推,决心; 大规模攻势; 矢志的追求 定义和用法 push( ...
- 05文件合并脚本--By Mark Lutz
''' 合并split.py创建的目录下的所有组分文件以重建文件. 依赖文件名的排序:长度必须一致. ''' import os,sys readsize=1024 def join(fromdir, ...
- StringTie用法详解
StringTie 参考链接: https://ccb.jhu.edu/software/stringtie/index.shtml?t=manual#input https://www.cnblog ...
- orcl 之 导入和导出
dmp文件导入 //1 oracle的数据模式是:用户建在表空间上,表建在用户上 //2 一个用户的表就象自己的私有财产一样,没有自己或管理员授权别的用户是不能查询或修改的: //3 对于不同用户下 ...
- Druid介绍2
Druid的发送数据和查询数据 Druid 开篇 - 大数据实时探索性分析平台 官网 Druid 一次海量数据实时处理的实践 使用HDFS作为Druid的deepStorage 在哪里下载druid ...
- 1、Python中的正则表达式(0601)
回顾: 1.文件对象: open('file','mode','bufsize') read,readline,readlines,write,writelines,flush,seek,tell 2 ...
- Lintcode415-Valid Palindrome-Medium
Given a string, determine if it is a palindrome, considering only alphanumeric(字母和数字) characters and ...
- React内三种函数的写法
以下提供三种React内函数的写法,都可以正常运行,有疑问可以留言 写法一:让函数内部的this指向这个类的实例,它是用bind实现的,bind的第一个参数表示context,就是this. //写 ...
- jmeter学习四配置元件详解
JMeter提供的配置元件中的HTTP属性管理器用于尽可能模拟浏览器行为,在HTTP协议层上发送给被测应用的http请求 1.Http信息头管理器 用于定制Sampler发出的HTTP请求的请求头的内 ...