Using the same model for DataSource and View

[Roman]

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.

[Petyo]

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

[Roman]

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

[Alexander Valchev]

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

[Roman]

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