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:
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.
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>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
0
Accepted
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.
Regards,
Daniel
Telerik
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!
0
Matjaz
Top achievements
Rank 1
Rank 1
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>0
Insad
Top achievements
Rank 2
Rank 2
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?
0
Hello,
Here's an example how this scenario can be implemented: dojo.
Regards,
Ivan Danchev
Progress Telerik
Here's an example how this scenario can be implemented: dojo.
Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Insad
Top achievements
Rank 2
Rank 2
answered on 09 Nov 2017, 07:10 AM
Ah, I see what you mean.
Thanks Ivan!