Li Yafei
A senior Ruby on Rails developer
80学院第三次课
meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
user-scalable=no" />
网格布局
媒体查询
# JS 端实现
# app/assets/javascripts/like.coffee
$(document).on 'turbolinks:load', ->
$('.like-button').click ->
if $(this).hasClass('liked')
$.ajax
url: $(this).data('url') + '/' + Cookies.get('like')
type: 'DELETE'
success: (res)=>
$(this).removeClass('liked')
$(this).children('.count').text(res.count)
Cookies.remove('like')
else
$.ajax
url: $(this).data('url')
type: 'POST'
success: (res)=>
$(this).addClass('liked')
$(this).children('.count').text(res.count)
Cookies.set('like', res.id)
# 根据是否已经喜欢, 渲染不同的 class
# app/views/blogs/_post.html.slim
p
button.button.like-button class="#{'liked' if post.liked_by?(cookies[:like])}" \
type='button' data-url=blog_likes_path(post)
span.count #{@likes_count}
span Like
By Li Yafei