问题描述
我最近一直在尝试为壁球比赛创建实时评分系统。我已经设法将ActionCable与Rails 5结合使用来自动更新页面上的分数,但是我想知道是否可以告诉Rails如果满足特定条件时刷新页面。
例如,如果游戏结束,则显示不同的页面,表明玩家在游戏之间休息。我需要页面完全刷新才能做到这一点。
在我的数据库中,当游戏结束时,布尔值“ break”被标记为true,然后视图使用条件if / else语句来决定显示什么。
下面附有我用来更新得分的代码,我在思考if data.break == true
时会自动刷新页面。
// match_channel.js (app/assets/javascripts/channels/match_channel.js)
$(function() {
$('[data-channel-subscribe="match"]').each(function(index,element) {
var $element = $(element),match_id = $element.data('match-id')
messageTemplate = $('[data-role="message-template"]');
App.cable.subscriptions.create(
{
channel: "MatchChannel",match: match_id
},{
received: function(data) {
var content = messageTemplate.children().clone(true,true);
content.find('[data-role="player_score"]').text(data.player_score);
content.find('[data-role="opponent_score"]').text(data.opponent_score);
content.find('[data-role="server_name"]').text(data.server_name);
content.find('[data-role="side"]').text(data.side);
$element.append(content);
}
}
);
});
});
我不知道这种事情是否可行,而且我对Javascript的相关知识也不了解,所以我希望在此方面有所帮助。
谢谢。
解决方法
重新加载当前页面相对简单。如果使用的是Turbolinks,则可以使用Turbolinks.visit(location.toString())
触发对当前页面的重新访问。如果您不使用Turbolinks,请使用location.reload()
。因此,您的received
函数可能类似于:
received: function(data) {
if (data.break) {
return location.reload();
// or...
// return Turbolinks.visit(location.toString());
}
// your DOM updates
}
这两种方法都等同于用户点击重新加载按钮,因此它将触发另一个GET,该GET将调用您的控制器并重新呈现视图。