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

MVVM inheritance

5 Answers 70 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Matjaz
Top achievements
Rank 1
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

Sort by
0
Accepted
Daniel
Telerik team
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!
 
0
Matjaz
Top achievements
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
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
Ivan Danchev
Telerik team
answered on 07 Nov 2017, 02:03 PM
Hello,

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
answered on 09 Nov 2017, 07:10 AM

Ah, I see what you mean.

Thanks Ivan!

 

Tags
MVVM
Asked by
Matjaz
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Matjaz
Top achievements
Rank 1
Insad
Top achievements
Rank 2
Ivan Danchev
Telerik team
Share this question
or