Bindings cause leaks

[Michael]

Hello,

we have a problem with some memory leaks using the kendo MVVM Pattern. I try to explain it based on the following class:

var myClass = (function (_super) {
    __extends(myClass, _super);
    function myClass(ctx, folder, options) {
        _super.call(this, ctx, folder, options);
        this.containerRight = null;
        this.viewModelRight = null;
    }
    myClass.prototype.init = function () {
        var dfd = $.Deferred();

        this.buildMenu().done(dfd.resolve).fail(dfd.reject);

        return dfd.promise();
    };
    myClass.prototype.buildMenu = function () {
        var _this = this;
        var dfd = $.Deferred();

        this.containerRight = this.container.find(".right");
        this.viewModelRight = { items: new kendo.data.ObservableArray([]) };
        kendo.bind(this.containerRight, kendo.observable(this.viewModelRight));

        var selectViewViewModel = kendo.observable({
            title: "test",
            iconSource: "test",
            iconStyle: "top: -270px; left: -73px;",
            dataSource: [],
            selectedValue: "",
            selected: function (e) {
                _this.doSomething();
            }
        });

        this.viewModelRight.items.push(selectViewViewModel);

        return dfd.resolve();
    };
    myClass.prototype.doSomething = function () {

    };
    myClass.prototype.destroy = function () {
        _super.prototype.destroy.call(this);

        kendo.unbind(this.containerRight);
    };
    return myClass;
})(vendor.Templates.TemplateBase);

 

 

The leak occures on 

selected: function (e) {
                _this.doSomething();
            }

or on

selectViewViewModel.bind("selected", function() { _this.doSomething() });

//and

selectViewViewModel.bind("selected", _this.doSomething.bind(this));

Every access to a instancemethod or variable out of the viewmodel seams to cause a leak.

 

Directly in jQuery we could solve the problem with, but it has no impact on bindings within the kendo MVVM

something.bind("selected", _this.doSomething.bind(this));

 

 Does someone know a solution for this problem?

 

Thanks in advance,

Michael

[Georgi Krustev]

Hello Michael,

In general, any access to a parent scope from a function that is encapsulated in a similar way will cause a leak. What you will need to do is to build your structure in a such way that does not require to access _this.doSomething() method (more specifically the _this variable). One possible way is to wire an event of the observable or move the _doSomething logic outside of the myClass object.
Every approach that limit the access to the _this variable from the observable scope will be sufficient.

Regards,
Georgi Krustev
Telerik

 

 

[Michael]

Hello Geargi,

thanks for the answere. I understand the Problem, but why doesn't the problem occur in similar scenarios with jQuery?

 jQuery also cause a leak when we bind somehing like this:

something.bind("click", function() { _this.doSomething() });

but works fine with something like

something.bind("click", _this.doSomething.bind(this));

 

Recards

Michael

 

​

something.bind("selected", function() { _this.doSomething() });

something.bind("selected", function() { _this.doSomething() });

something.bind("selected", function() { _this.doSomething() });

something.bind("selected", function() { _this.doSomething() });

something.bind("selected", function() { _this.doSomething() });

something.bind("selected", function() { _this.doSomething() });

[Georgi Krustev]

Hello Michael,

As I mentioned in my previous reply, the only reason for the observed leak is the way the function scope is used. It leaks out of the function and thus the browser's garbage collector will not be able to release the memory. I would suggest you re-design your implementation to avoid such scope leakage.

With regards to the question, why jQuery does not leak in the second case, I wouldn't be able to provide any concrete answer as I am not familiar with implementation.

Regards,
Georgi Krustev
Telerik