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

Question

我正在使用Unobtrusive JavaScript解决方案在Rails应用程序中进行轮询，这似乎是一个很好的解决方案，尽管我无法从.js.erb的角度调用.stop()方法。我希望能够在为通过轮询刷新的项目之一打开内联编辑表单时停止轮询。我从渲染的 edit.js.erb 视图中调用.stop()，但它一直在轮询......

unobtrusive_poller.咖啡：

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

编辑.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 存储在哈希中

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

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

希望对您有所帮助！