Using the same model for DataSource and View

5 posts, 1 answers
  1. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 12 Dec 2013 Link to this post

    I'm not sure if I'm doing something conceptually wrong, but I'd like to use a predefined model and fill it with data form a remote request through DataSource AND the same model inside a view for exposing it's data in HTML.

    Right now, I'm doing something like that:
    ModelUserProfile: kendo.data.Model.define({
     id: "userId"
    ,fields: {
     ,firstName: { type: "string" }
     ,lastName: { type: "string" }
            ...
    }
    });
     
    var datasource = new kendo.data.DataSource({
           ...
          schema: {
                model: ModelUserProfile
          },
          ...
    });
    <div
        id="show-userprofile"
         data-role="view"
         data-model="ModelUserProfile"   
         data-layout
    ="default"
    >
    ...
    </div>
     
    <script id="templateUserprofile" type="text/x-kendo-template">
    ...
       <div data-bind="visible: firstName">Vorname:</div>
    ...
    </script>

    As soon as I use the binding inside the view, I'm getting an "Uncaught TypeError: Cannot read property 'get' of undefined" from kendo.mobile.min.js.

    Am I doing this wrong (or too complicated?).

    As a work-around, I changed it to:
    # if (firstName) { # <div>Vorname:</div> # } #
    which works fine, but I'd prefer to bind it.

    Thanks in advance for any help on this.


  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 13 Dec 2013 Link to this post

    Hi Roman,

    the mobile view expects an observable object as the model configuration option. The kendo.data.Model class on the other side, serves as a structure definition for the data in the datasource.

    Given the different purposes of the two, I can't really recommend reusing the same object. A common approach is to have an observable object with a field set to a DataSource, which is referred from the view bindings. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 13 Dec 2013 Link to this post

    Thanks for your reply, Petyo.

    I have tried what you suggested, but now it's unclear to me how the view model is updated from the datasource (or I misunderstood you):
    var viewModelUserProfile = kendo.observable({
            ,firstName: ""
            ,lastName: ""
            ,ds: new kendo.data.DataSource({
                ...
                change: function() {
                    var data = this.data();
                    // HOW TO UPDATE VIEW MODEL WITH data HERE?
                          // (except manually updating field by field, which would be insane)
                },
                    ...
            })
    });
    Thanks a lot,
    Roman
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 16 Dec 2013 Link to this post

    Hello Roman,

    It is unclear what exactly you are trying to bind. If the template is used by a Kendo Mobile ListView you may directly bind the widget to the dataSource instance.
    If the template is not assigned to a widget but rendered directly via source binding, the source should be observable array so you should use the following pattern:
    var viewModel = kendo.observable({
        data: [],
        dataSource: new kendo.data.DataSource({
            //...
            change: function() { viewModel.set("data", this.view()); }
        })
    }

    In this way you will be able to render all the items located in the DataSource.
    If your aim is to render a single item then you should use the following approach:
    var viewModel = kendo.observable({
        person: { },
        dataSource: new kendo.data.DataSource({
            //...
            change: function() { viewModel.set("person", this.view()[0]); }
        })
    }

    I hope this information will help.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 16 Dec 2013 Link to this post

    Hello Alexander,

    thanks for your reply. The second example made it clear for me, it works now. Since I don't use a widget with direct datasource binding in this case (simple detail page), I'm rendering the template manually. I was probably thinking too object-oriented, assuming that the model fields automatically getting filled from the datasource when connected correctly, like in ORM scenarios.

    Another error on my side was the use of data-bind="..." inside an external template instead of the view itself, which clouded things for me further until I noticed it.

    Thanks for your help,
    Roman
Back to Top
Kendo UI is VS 2017 Ready