Obserable objects and JS Inheritance

[Jacques]

I was trying to define some reusable code but then ran into problems because methods/properties in the MVVM observable object weren't there. 

Take this code for example: 

var editableModel = function ()
{
    this.isEditing = false;
};
editableModel.prototype.toggleEditMode = function (e)
{
    this.set("isEditing", !this.isEditing);
    e.stopPropagation();
};

var individualClient = function ()
{
    this.clientCode = "";
    this.initials = "";
    this.title = "";
    this.dateOfBirth = "";
    this.language = "";
};
individualClient.prototype = new editableModel();

Now if I were to try and use this as an observable object in the following way: 

var viewModel = new individualClient();
viewModel.clientCode = "ABS";
viewModel.initials = "JA";
... //set the rest of the properties

kendo.bind($(".binding-container"),viewModel);

and if I had some HTML that made use of the isEditing, or toggleEditMode property/method: 

<a href="#" onclick="viewModel.toggleEditMode()">Edit</a>
<!--NOTE: This hyperlink is not located inside the binding-container which is why I'm calling it as I am, using the onclick event and the qualified object name -->

<span data-bind="text: clientCode, invisible: isEditing">@Model.ClientCode</span>

it wouldn't work, or rather isn't working. 

Is this because kendo is replacing my Object's prototype with it's own ObservableObject? 

Regards,
Jacques

[Daniel]

Hello Jacques,

The code will not work because:

1. The "viewModel" is not converted to an ObservableObject and thus does not have a set method which is used in the toggleEditMode function. You should use the kendo.observable method to convert the object in order to be able to use the method with the viewModel object:
   

   viewModel = kendo.observable(viewModel);
   kendo.bind($(".binding-container"),viewModel)

2. The event handler is set with the onclick attribute and it will not be passed an event argument by default. You should either pass the event argument to the function or use events or click binding:
   

   <a href="#" data-bind="click: toggleEditMode">Edit</a>

Regards,
Daniel
Telerik

[Jacques]

sorry Daniel I forgot to include the code snippet where the model is converted to an observable which is as follows:

//i'll change the object name to model so as to avoid confusion
var model = new individualClient();
model.clientCode = "ABS";
model.initials = "JA";
... //set the rest of the properties

var kendoViewModel = kendo.observable(model);

//then do the binding
kendo.bind(".container",kendoViewModel);

So since it is converted and still didn't work, I thought that perhaps the reason is the call to kendo.observable which may replace my individualClient's prototype with an ObservableObject object instead of my 'parent' object  editableModel. 

?

Regards,
Jacques

[Daniel]

Hello again Jacques,

Did you also change the code for handling the event propagation? I created a small jsBin example using the described setup and it seems to work as expected on my side.

Regards,
Daniel
Telerik

[Jacques]

I'll give that one a try and get back to you. Your jsBin seems to be doing exactly what I was trying to achieve.

Regards,
Jacques