javascript – Rails Action Cable和Turbolinks：避免多重绑定

我的application.html.haml中有一个代码,用于决定是否将用户订阅到给定的通道,具体取决于某些用户属性.

问题是,鉴于我在身体中有这段代码,当我点击一个链接重定向到另一个页面时,它再次订阅用户而不是保持旧连接,所以我执行了receive()方法多次.

这是我在application.html.haml中的代码：

%html
  %head
    -# other stuff
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    -# other stuff

    - if current_user.is_admin?
      :coffee
        MyApp.AdminNotifications.init()

资产/ Java脚本/通知/ admin_notifications.js.coffee

window.MyApp.AdminNotifications = class AdminNotifications
  @init: ->
    App.cable.subscriptions.create "ProductsChannel",
      received: (data) ->
        console.log 'Data Received' # This is being executed multiple times

第一次加载页面时,当我向该频道广播消息时,控制台只记录一次“数据已接收”.
我点击一个链接重定向到另一个页面,我向该频道广播一条新消息,现在控制台正在记录“Data Received”两次.到目前为止……

事实上,当我在chrome的控制台上运行时：

App.cable.subscriptions.subscriptions

它返回对同一频道的多个订阅(每次点击一个链接并重定向到另一个页面时一次).

注意：有更多动作电缆设置,我没有添加到这篇文章,因为它工作正常.

我怎么能避免这种情况？有任何想法吗？

解决方法:

看起来您只需要MyApp.AdminNotifications的单个实例,因此您可能只需要添加一个class属性来标记该类已初始化：

window.MyApp.AdminNotifications = class AdminNotifications
  @init: ->
    unless @initialized
      App.cable.subscriptions.create "ProductsChannel",
        received: (data) ->
          console.log 'Data Received'
      @initialized = true

将来您可能希望包装Action Cable API以管理您自己的订阅.

作为使用Turbolinks时的一般规则,最好在application.js文件中包含尽可能多的内容,而不是在内联脚本中包含(请参阅：https://github.com/rails/rails/pull/23012#issue-125970208).我猜你使用了内联脚本,所以你可以有条件地运行它(如果是current_user.is_admin？).一种流行的方法是使用元标记来传达这些数据,所以在你的头脑中：

<meta name="current-user-is-admin" content="true">

然后你可以：

window.MyApp.User = class User
  constructor: ->
    @isAdmin = @getMeta('current-user-is-admin') == 'true'

  getMeta: (name) ->
    meta = document.querySelector("meta[name=#{name}]")
    meta.getAttribute('content') if meta

最后,要从布局中删除AdminNotifications init代码,请在application.js中的某处包含：

document.addEventListener('turbolinks:load', ->
  window.MyApp.currentUser = new window.MyApp.User
  window.MyApp.AdminNotifications.init() if window.MyApp.currentUser.isAdmin
)

希望有所帮助！

标签：javascript,ruby-on-rails,turbolinks,actioncable,turbolinks-5
来源： https://codeday.me/bug/20190710/1427911.html