即时投票 (Rails + MySQL + jQuery)
Making upvotes happen instantly (Rails + MySQL + jQuery)
我正在努力研究如何使用 Rails 和 jQuery 构建 "upvote" 流程,以便最终用户立即获得支持。
首先,要定义点赞,我的意思是就像您在 reddit 上所做的那样,点击向上箭头会注册对记录的投票,并增加计数器(YouTube 上的赞是另一个例子)。
我正在为数据库使用 Rails 3.2、jQuery 和 MySQL。
现在我的流程是这样的:
在 html.erb 模板中,upvote 元素有一个 .js-remote-upvote
class,使用 jQuery:[=18 将其绑定到点击=]
$('body').on('click', '.js-remote-upvote', function(e) {
e.preventDefault();
e.stopPropagation();
$this = $(e.currentTarget);
$.ajax({
type: $this.data('method') == "post" ? "POST" : "GET",
url: $this.data('url')
})
});
data-url
转到我的 UpvotesController 切换操作,它创建了投票记录,并处理了一些其他杂项。东西.
- toggle.js.erb 模板然后包含 javascript 代码,该代码在 upvote 元素上添加
.active
class,并递增计数器。
问题是,无论我如何尝试在控制器中倾斜切换动作,它都会消耗一些时间(应用程序范围 before_filters、跟踪等)。这导致最终用户感觉投票不是即时的,当我们习惯于在 reddit 上即时发生的投票时,我觉得这会导致糟糕的用户体验。
我的思考方式正确吗?或者我应该增加计数器并立即设置 .active
css class 在 请求传递给 Rails 之前?这对我来说感觉不对,因为控制器可能会抛出异常 - 基本上感觉 js 是 "dumb" 并且无论后端发生什么都会向用户显示即时投票。
采用这种模式会不好吗?
谢谢!
我做了同样的事情,但使用了一个技巧..作为软件开发人员,无论您多么努力,只有我们知道 scenes.So 背后发生的事情,您必须存储 upvote
计数,谁点击了 upvote
,有计数 incremted
...等详细信息,然后也更新视图。
无需转到服务器并更新数据库中的详细信息,然后再更新视图。您可以先 UPDATE/CHANGE 视图,然后再移至服务器使用 AJAX 对用户来说看起来很快。
首先为了良好的用户体验..首先 使用jquery更新视图代码并然后使用ajax从更新投票的控制器调用方法...所以至少对用户来说,它的即时你知道在幕后,至少需要2秒...
正在查看文件...
####update the count and also show that user has voted successfully by jquery
$('#image_up_<%= @image.id%>').html(function(i, val) { return val*1+1 });
$(".user_vote_status").html("You like this Image");
服务器端...更新详细信息并再次更新视图以进行确认
def vote
@image = Image.find(params[:id])
###method to add count by current user
@image.vote_by_current_user(current_user.id,params[:type])
###code to update the count
## reload to get latest count
@image.reload
respond_to :js
end
在vote.js.erb
$('#image_up_<%= @image.id%>').html("<%= @image.likes.size %>");
//update the vote status on the page that user has liked/disliked the post
$(".user_vote_status").html("You like this Image");
我正在努力研究如何使用 Rails 和 jQuery 构建 "upvote" 流程,以便最终用户立即获得支持。
首先,要定义点赞,我的意思是就像您在 reddit 上所做的那样,点击向上箭头会注册对记录的投票,并增加计数器(YouTube 上的赞是另一个例子)。
我正在为数据库使用 Rails 3.2、jQuery 和 MySQL。
现在我的流程是这样的:
在 html.erb 模板中,upvote 元素有一个
.js-remote-upvote
class,使用 jQuery:[=18 将其绑定到点击=]$('body').on('click', '.js-remote-upvote', function(e) { e.preventDefault(); e.stopPropagation(); $this = $(e.currentTarget); $.ajax({ type: $this.data('method') == "post" ? "POST" : "GET", url: $this.data('url') }) });
data-url
转到我的 UpvotesController 切换操作,它创建了投票记录,并处理了一些其他杂项。东西.- toggle.js.erb 模板然后包含 javascript 代码,该代码在 upvote 元素上添加
.active
class,并递增计数器。
问题是,无论我如何尝试在控制器中倾斜切换动作,它都会消耗一些时间(应用程序范围 before_filters、跟踪等)。这导致最终用户感觉投票不是即时的,当我们习惯于在 reddit 上即时发生的投票时,我觉得这会导致糟糕的用户体验。
我的思考方式正确吗?或者我应该增加计数器并立即设置 .active
css class 在 请求传递给 Rails 之前?这对我来说感觉不对,因为控制器可能会抛出异常 - 基本上感觉 js 是 "dumb" 并且无论后端发生什么都会向用户显示即时投票。
采用这种模式会不好吗? 谢谢!
我做了同样的事情,但使用了一个技巧..作为软件开发人员,无论您多么努力,只有我们知道 scenes.So 背后发生的事情,您必须存储 upvote
计数,谁点击了 upvote
,有计数 incremted
...等详细信息,然后也更新视图。
无需转到服务器并更新数据库中的详细信息,然后再更新视图。您可以先 UPDATE/CHANGE 视图,然后再移至服务器使用 AJAX 对用户来说看起来很快。
首先为了良好的用户体验..首先 使用jquery更新视图代码并然后使用ajax从更新投票的控制器调用方法...所以至少对用户来说,它的即时你知道在幕后,至少需要2秒...
正在查看文件...
####update the count and also show that user has voted successfully by jquery
$('#image_up_<%= @image.id%>').html(function(i, val) { return val*1+1 });
$(".user_vote_status").html("You like this Image");
服务器端...更新详细信息并再次更新视图以进行确认
def vote
@image = Image.find(params[:id])
###method to add count by current user
@image.vote_by_current_user(current_user.id,params[:type])
###code to update the count
## reload to get latest count
@image.reload
respond_to :js
end
在vote.js.erb
$('#image_up_<%= @image.id%>').html("<%= @image.likes.size %>");
//update the vote status on the page that user has liked/disliked the post
$(".user_vote_status").html("You like this Image");