Using “this” inside the Viewmodel?

[la]

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?

[Alexander Valchev]

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

[la]

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 ?

[Alexander Valchev]

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

[Alexander Valchev]

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