【问题标题】:Can I use ActionCable to refresh the page?我可以使用 ActionCable 刷新页面吗?
【发布时间】:2020-09-07 01:06:48
【问题描述】:

我最近一直在尝试为壁球比赛创建一个实时计分系统。我已经设法将 ActionCable 与 Rails 5 一起使用来自动更新页面上的分数,但我想知道是否可以告诉 Rails 在满足特定条件时刷新页面。

例如,如果游戏已经结束,则会显示不同的页面来说明玩家在游戏之间休息。我需要页面完全刷新才能发生这种情况。

在我的数据库中,布尔值“break”在游戏结束时被标记为真,然后视图使用条件 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 相关的事情,所以我很感激这方面的任何帮助。

谢谢。

【问题讨论】:

    标签: javascript ruby-on-rails ruby-on-rails-5 actioncable


    【解决方案1】:

    重新加载当前页面相对简单。如果您使用的是 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,它会调用你的控制器并重新渲染视图。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-04-15
      • 2013-08-21
      • 1970-01-01
      • 2011-07-09
      • 2012-12-12
      • 2010-11-10
      • 2012-01-05
      相关资源
      最近更新 更多