This is a migrated thread and some comments may be shown as answers.

Binding a viewModel to a dataSource.

2 Answers 322 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
RodEsp
Top achievements
Rank 2
RodEsp asked on 12 Jun 2012, 05:16 PM
I have the following dataSource that I retrieve from a json file:
[
    {
    "Name": "Company 1",
    "People": [{
        "Person": {
            "Name": "Jon",
            "Job": "IT Guy"
        }},
    {
        "Person": {
            "Name": "Kate",
            "Job": "Web Developeresse"
        }}]},
{
    "Name": "Company 2",
    "People": [{
        "Person": {
            "Name": "Jane",
            "Job": "IT Girl"
        }},
    {
        "Person": {
            "Name": "Karl",
            "Job": "Web Developer"
        }}]}
]

My goal:

Display a list of companies' names in a mobile list view.
When you select a company, it should change views and display a mobile list view of the selected company's people's names.

I can get the first list view to show up and on the click event I can navigate to a new view. How should I approach the second list view? 

Can I use a view model to do this? Can you bind the mobile list view's dataSource to the viewModel? 

I've created this jsFiddle to ask whether this would be the correct method of doing this: http://jsfiddle.net/RodEsp/p9UQW/

2 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 15 Jun 2012, 12:07 PM
Hello Rodrigo,

DataSource works only with arrays therefore I am afraid that you cannot pass an object "Skills" to the data parameter:
this.set("personSource", new kendo.data.DataSource({
    data: this.get("selectedPerson").Person.Job.Skills
}));

In addition I would recommend to use the data-model attribute to bind the view to a MVVM viewModel.
<div id="v1" data-role="view" data-layout="mobile-view" data-model="viewModel" data-title="View 1">
<!-- -->
</div>

For convenience I have updated your jsFiddle example, I hope this helps.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RodEsp
Top achievements
Rank 2
answered on 15 Jun 2012, 02:39 PM
Ah yes, sorry, "skills" was supposed to be an array. I should pay more attention when writing JSON next time.
Thanks for letting me know about the data-model attribute!
Tags
MVVM
Asked by
RodEsp
Top achievements
Rank 2
Answers by
Alexander Valchev
Telerik team
RodEsp
Top achievements
Rank 2
Share this question
or