1

I am setting some setInterval values on my widget's controller code as follows:

define(['durandal/widget'],function (widget) {
    var count = 0;
    var intervals = [],
        ctor = function (element, settings) {
               this.settings = settings;
        };

    ctor.prototype.updateCount = function( ){
            var interval = setInterval(function () {
            count = count + 1;
            return count;
            }, 1000);
            intervals.push(interval);
          }   
    return ctor;
}

The above code is being run inside a forEach loop inside the view like:

<div data-bind="foreach: {data: settings.items}">
 <span class="count" data-bind="text:$parent.updateCount()"></span>
</div>

What I would like to do is call the clearInterval method on all the items in the intervals array when the widget is destroyed or essentially removed from the dom. I know I could do this using the deactivate on a viewModel but from a reusability point of view, I would like the widget itself to handle the clearing of interval. Is there any way I could achieve this with the widget module in Durandal.

nimgrg
  • 582
  • 1
  • 7
  • 17

2 Answers2

2

For anyone else looking into the same issue, there's a knockout way of achieving the same. Have a look at the following links https://github.com/BlueSpire/Durandal/issues/139 and https://groups.google.com/forum/#!topic/durandaljs/NqUkY-9us2g . The suggestion is to use:

ko.utils.domNodeDisposal.addDisposeCallback(element, callback)
nimgrg
  • 582
  • 1
  • 7
  • 17
0

As long as the widget is removed with JQuery's "remove" function, adding a custom event handler on this "remove" function should go like this:

var self = this;
var self.count = 0;
var self.intervals = [];
self.ctor = function (element, settings) {
    $(element).on("remove", function () {
        $.each(self.intervals, function(index, ival) { 
            clearInterval(ival); 
        });
    });
    this.settings = settings;
};

The problem is that if the widget is removed without JQuery, simply by manipulating the DOM, the event will not be fired. You could then implement the code for the DOMNodeRemoved event, but it's not gonna work for IE...

Edit: if you're using JQuery pre-1.9.1, you might want to check out the other answers to this question.

Community
  • 1
  • 1
Jalayn
  • 8,934
  • 5
  • 34
  • 51