This is a migrated thread and some comments may be shown as answers.

Bindings cause leaks

3 Answers 34 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 26 May 2015, 01:26 PM

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

3 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 28 May 2015, 02:52 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Michael
Top achievements
Rank 1
answered on 28 May 2015, 03:30 PM

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() });
0
Georgi Krustev
Telerik team
answered on 01 Jun 2015, 09:16 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
Michael
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Michael
Top achievements
Rank 1
Share this question
or