从不同文件调用 JavaScript 构造方法 - Rails

Question

我正在使用 Unobtrusive JavaScript solution for polling in a Rails application，这似乎是一个很好的解决方案，但我无法从 .js.erb 视图调用 .stop() 方法。当为通过轮询刷新的项目之一打开内联编辑表单时，我希望能够停止轮询。我从呈现 edit.js.erb 视图调用 .stop()，但它一直在轮询...

unobtrusive_poller.coffee:

class Poller

  constructor: (@div) ->

  interval: ->
    $(@div).data("interval") ? 3000

  url: ->
    $(@div).data("url")

  start: ->
    console.log "Starting polling"
    @intervalId = setInterval(@request, @interval())

  request: =>
    # console.log "Interval: #{@interval()}"
    # console.log "URL: #{@url()}"
    console.log "Polling"
    $.ajax(
      url: @url(),
      dataType: "script").fail (data) =>
      console.log "Poll failed!" # + JSON.stringify(data)
      return

  stop: ->
    console.log "Stopping polling"
    clearInterval(@intervalId)

$(document).on 'turbolinks:load', ->
  $("div[data-poll='true']").each (i, div) ->
    console.log "DIV: " + div
    new Poller(div).start()

edit.js.erb:

// Pause polling while edit form is open
console.log($('div#messages[data-poll='true']'));
new Poller($('div#messages[data-poll='true']')).stop();

// $("div[data-poll='true']").each(function(i, div) {
//   console.log("DIV: " + div);
//   return new Poller(div).stop();
// });

...

据我了解，问题是 @intervalId 未定义。

这是在正确的轨道上吗？

任何关于如何使这项工作的建议将不胜感激。

谢谢！

Answer 1

您需要存储每个 div 初始化轮询事件的对象。您每次都在创建新对象，但不会将其存储在任何地方。您需要将其存储在某处，以便稍后在创建的对象上调用停止。

Update : storing the Id in Hash

此代码创建一个哈希图来存储您绑定的所有轮询事件

window.pollHash = {}

$(document).on 'turbolinks:load', ->
  $("div[data-poll='true']").each (i, div) ->
    console.log "DIV: " + div
    id = $(div).attr("id")
    pollObject = new Poller(div)
    pollObject.start()
    window.pollHash[id] = pollObject

并且在 edit.js.erb 中，您再次使用 new 运算符创建新对象。您应该像上面那样使用已经存储的对象，然后调用停止方法，如下所示。

targetDiv = $('div#messages[data-poll='true']')
//Not sure about your target condition, replace 
// above selector as your target as per your need.
targetId = $(targetDiv).attr("id")
window.pollHash[targetId].stop()

希望对您有所帮助！

从不同文件调用 JavaScript 构造方法 - Rails

Call JavaScript constructor method from different file - Rails

javascript

ajax

ruby-on-rails

erb

coffeescript