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

MVVM inheritance

5 Answers 280 Views

MVVM

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

Matjaz asked on 02 Sep 2014, 04:16 PM

In documentation it writes, that kendo.Observable inherits from kendo.Class. In documentation for Class I read "The base class of most Kendo objects. Provides simple inheritance support".

So with the upper statements this should work:

<div id="main">

<div data-bind="html: value"></div>

<div data-bind="html: value2"></div>

</div>

<script>

var MVVM1 = kendo.observable(

{

value: "bla",

});

var MVVM2 = MVVM1.extend(

{

value2: "bla2",

});

kendo.bind($('#main'), this.MVVM2);

</script>

but it doesn't.
Is there any way to inherit with MVVM? In my SPA I could share some MVVM and I don't want to duplicate code.

5 Answers, 1 is accepted

Accepted

answered on 04 Sep 2014, 11:40 AM

Hello Matjaz,

extend is a class method and the kendo.observable method creates an instance so extend will not be available. You should extend kendo.data.ObservableObject instead in order to create a base class for the ViewModels e.g.

var MVVM1 = kendo.data.ObservableObject.extend(

{

value: "bla",

});

var MVVM2 = new MVVM1(

{

value2: "bla2",

});

kendo.bind($("#example"), MVVM2);

Regards,
Daniel
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 06 Sep 2014, 10:04 PM

Just if someone need it: three level support:

<body>

<div id="main">

<div data-bind="html: value"></div>

<div data-bind="html: value2"></div>

<div data-bind="html: value3"></div>

</div>

<script>

var MVVM1 = kendo.data.ObservableObject.extend(

{

value: "bla",

});

var MVVM2 = MVVM1.extend(

{

value2: "bla2",

});

var MVVM3 = new MVVM2(

{

value3: "bla3",

});

kendo.bind($('#main'), MVVM3);

</script>

</body>

answered on 03 Nov 2017, 01:50 PM

I've tried this but I have some issues with the functions available in the base class when there are nested structures.

In the flat (all in one class) version I have something like:

var viewModel = kendo.observable({

aa: 1

, nestedStuff: {

bb: 2

, SetThisValue: function (newValue)

{

this.set('bb', newValue);

}

, OnShow: function ()

{

this.set('aa', 32);

this.nestedStuff.SetThisValue(123);

}

});

Which works as expected.

When I try to use a base class I use something like this:

var baseTestVM = kendo.data.ObservableObject.extend({

nestedStuff: {

bb: 2

, SetThisValue: function (newValue)

{

this.set('bb', newValue);

}

});

var viewModel = new baseTestVM({

aa: 1

, OnShow: function ()

{

this.set('aa', 32);

this.nestedStuff.SetThisValue(123);

}

});

Which gives an error on the line with this.set('bb', newValue); giving the error that this.get is not a function script.

When you use the this.set() function outside the nested stuff, the this.set works.

Can you help me with this?