从不同的文件调用 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 的对象。您每次都在创建新对象，但不会将其存储在任何地方。您需要将其存储在某个地方，以便稍后在创建的对象上调用 stop。

更新：将 Id 存储在 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 运算符创建新对象。您应该像上面那样使用已经存储的对象，然后调用 stop 方法，如下所示。

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()

希望对你有帮助！