Using “this” inside the Viewmodel?

5 posts, 0 answers
  1. la
    la avatar
    2 posts
    Member since:
    Dec 2013

    Posted 13 Jan 2014 Link to this post

    I have this HTML:

    <div id="bills" data-role="view" data-model="Bills" data-init="Bills.init" data-layout="default">
    <h1 data-bind="text:name">Text</h1>
    </div>


    and the ViewModel for this is:

    var Bills = kendo.observable({
      name: "John Doe",
      init: function() {
      this.doSomething();
    },

    doSomething: function() {
      alert(this.name);
    }
    });


    Both codeparts with "this" are not working. "this.doSomething" produces the error:Object [object Object] has no method 'doSomething'
    Why is it not possible to use "this" in such a ViewModel?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 13 Jan 2014 Link to this post

    Hi La mum,

    View events cannot be bound via MVVM bindings (e.g. with data-bind attribute) which is why they are set directly as an object fields. For example:
    <div id="bills" data-role="view" data-model="Bills" data-init="Bills.init" data-layout="default">

    This is correct, however in this case the init method will not be executed in the context of the ViewModel but in the context of the View. This means that the 'this' keyword will refer to the View which does not have doSomething method.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. la
    la avatar
    2 posts
    Member since:
    Dec 2013

    Posted 13 Jan 2014 Link to this post

    Thank you. Is there another way to to "connect" the observeable with the view? I mean i would like to encapsulate all of my properties and my functions in one obejct und a view should use this object as the model. So every view has its own viewmodel. Does a best practice for this somewhere exist ?
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 13 Jan 2014 Link to this post

    Hello,

    Since the View events cannot be bound directly, you can reference the ViewModel as a variable. For example:
    var Bills = kendo.observable({
      name: "John Doe",
      init: function() {
        Bills.doSomething();
      },
      doSomething: function() {
        alert(this.name);
      }
    });


    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 13 Jan 2014 Link to this post

    Hello,

    Since the View events cannot be bound directly, you can reference the ViewModel as a variable. For example:
    var Bills = kendo.observable({
      name: "John Doe",
      init: function() {
        Bills.doSomething();
      },
      doSomething: function() {
        alert(this.name);
      }
    });


    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top