This is a migrated thread and some comments may be shown as answers.
Using the same model for DataSource and View
4 Answers 80 Views
This is a migrated thread and some comments may be shown as answers.
Roman
Top achievements
Rank 1
Roman asked on 12 Dec 2013, 01:01 PM
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.


4 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 13 Dec 2013, 01:35 PM
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!
0
Roman
Top achievements
Rank 1
answered on 13 Dec 2013, 03:10 PM
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
0
Accepted
Alexander Valchev
Telerik team
answered on 16 Dec 2013, 10:22 AM
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!
0
Roman
Top achievements
Rank 1
answered on 16 Dec 2013, 02:00 PM
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
Tags
MVVM
Asked by
Roman
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Roman
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or