Bindings cause leaks

4 posts, 0 answers
  1. Michael
    Michael avatar
    8 posts
    Member since:
    Feb 2013

    Posted 26 May 2015 Link to this post

    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

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 28 May 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Michael
    Michael avatar
    8 posts
    Member since:
    Feb 2013

    Posted 28 May 2015 in reply to Georgi Krustev Link to this post

    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() });
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 01 Jun 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready