Rufen Sie JavaScript-Konstruktormethode aus einer anderen Datei - Rails

Question

Ich verwende die Unobtrusive JavaScript solution for polling in a Rails application, die eine gute Lösung zu sein scheint, obwohl ich Schwierigkeiten habe, die .stop()-Methode von einer .js.erb Ansicht aufrufen. Ich möchte die Abfrage abbrechen können, wenn ein Inline-Bearbeitungsformular für eines der Elemente geöffnet ist, die durch Abfragen aktualisiert werden. Ich nenne .stop() aus der edit.js.erb Ansicht gerendert wird, aber es Polling hält ...

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(); 
// }); 

... 

Wie Ich verstehe es, das Problem ist @intervalId ist undefiniert.

Ist das auf dem richtigen Weg?

Irgendwelche Vorschläge, wie man diese Arbeit macht, würde sehr geschätzt werden.

Danke!

Answer 1

Sie müssen das Objekt der einzelnen div speichern Sie initialisieren das Abfrageereignis. Sie erstellen jedes Mal ein neues Objekt, speichern es aber nirgendwo. Sie benötigen es, um es irgendwo zu speichern, um später das erstellte Objekt anzuhalten.

Update: die Id in Hash speichern

Dieser Code ein hashmap erstellen alle Umfrage Ereignis speichern Sie

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 

Und In edit.js.erb verbindlich sind, waren Sie Erneutes Erstellen eines neuen Objekts unter Verwendung des Operators new. Sie sollten die bereits gespeicherten Objekte wie oben beschrieben verwenden und dann die Stop-Methode wie unten gezeigt aufrufen.

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

Hoffe es hilft!