MVVM inheritance

3 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
    2173 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>
Back to Top