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

Obserable objects and JS Inheritance

4 Answers 70 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Jacques
Top achievements
Rank 2
Jacques asked on 28 Jan 2014, 07:05 AM
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






4 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 30 Jan 2014, 08:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacques
Top achievements
Rank 2
answered on 30 Jan 2014, 08:57 AM
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
0
Daniel
Telerik team
answered on 03 Feb 2014, 08:31 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacques
Top achievements
Rank 2
answered on 03 Feb 2014, 10:57 AM
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
Tags
MVVM
Asked by
Jacques
Top achievements
Rank 2
Answers by
Daniel
Telerik team
Jacques
Top achievements
Rank 2
Share this question
or