MVVM inheritance

6 posts, 1 answers
  1. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

    Posted 02 Sep 2014 Link to this post

    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.
  2.
  3. Answer
    Daniel
    Admin
    Daniel avatar
    2207 posts

    Posted 04 Sep 2014 Link to this post

    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!
     
  5. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

    Posted 06 Sep 2014 Link to this post

    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>
  7. Insad
    Insad avatar
    41 posts
    Member since:
    Jan 2010

    Posted 03 Nov 2017 Link to this post

    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?

     

  8.
  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1566 posts

    Posted 07 Nov 2017 Link to this post

    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.
  11. Insad
    Insad avatar
    41 posts
    Member since:
    Jan 2010

    Posted 09 Nov 2017 in reply to Ivan Danchev Link to this post

    Ah, I see what you mean.

    Thanks Ivan!

     

Back to Top