[Solved] MVVM + DataSource Binding for Profile View

[Sherman]

Hi there, I have encountered an interesting issue that has left me stuck for days. I have used the datasource filtering configuration before but not in the current context. I am trying to create a User Profile view for my mobile app. Please see the attached image for the JSON that I am retrieving from the web services that I have created. And looking at the structure of my data, can someone help me point out if there is anything I have done wrong.

Below are the code snippets from my user-profile.js file.

1.app.profileView = kendo.observable({
2.    onShow: function() {}
3.});

01.(function(parent) {
02.    var provider = app.data.woofBackend,
03.        init = function() {
04.
05.        },
06.        successHandler = function(data) {
07.            if (data && data.result) {
08.                app.user = data.result;
09.            } else {
10.                init();
11.            }
12.        },
13.        userProfileViewModel = kendo.observable({
14.            userAccount: new kendo.data.DataSource({
15.                schema: {
16.                    data: function(response) {
17.                        var userDetails = _.where(response, { Username: app.user.Username});
18.                        return userDetails[0];
19.                    }
20.                },
21.                transport: {
22.                    read:  {
23.                        url: "http://woofapi.xdevap-development.com/UserAccounts/",
24.                        dataType: "json" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
25.                    }
26.                }
27.            }),
28.            userProfile: new kendo.data.DataSource({
29.                schema: {
30.                    data: function(response) {
31.                        var userDetails = _.where(response, { Username: app.user.Username});
32.                        return userDetails[0].UserProfile;
33.                    }
34.                },
35.                transport: {
36.                    read:  {
37.                        url: "http://woofapi.xdevap-development.com/UserAccounts/",
38.                        dataType: "json" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
39.                    }
40.                }
41.            })
42.        });
43.
44.    parent.set('userProfileViewModel', userProfileViewModel);
45.
46.    // This method below will bind the onShow function to the view when the screen is loaded.
47.    parent.set('onShow', function() {
48.
49.        // If the user already has a session, then automatically log them in. Otherwise, display the corresponding view.
50.        provider.Users.currentUser().then(successHandler, init);
51.    });
52.
53.})(app.profileView);

As you can see above, I had some trouble using the filter option for matching the Username of the user. So I have used a workaround by using underscore.js. I have tried using a debug to print the output into a javascript alert(), and it works fine for now.

The next challenge I am having is trying to bind the userProfileViewModel to my view in the HTML (see below).

In my User Profile View HTML file:

1.<div data-role="view" data-title="Profile" data-layout="main" data-model="app.profileView" data-show="app.profileView.onShow">
2.    <span data-bind="text: userProfileViewModel.userAccount.Firstname"></span>
3.</div>

[Alexander Valchev]

Hello Sherman,

The following will not work because userProfileViewModel.userAccount is a dataSource, not a plain JavaScript object.

<span data-bind="text: userProfileViewModel.userAccount.Firstname"></span>

In case userAccount and userProfile aim to hold information about single user it is better to retrieve the data via separate ajax request. For example:

userProfileViewModel = kendo.observable({
    userAccount: {},
    userProfile: {}
});

$.ajax({
    url: "http://woofapi.xdevap-development.com/UserAccounts/",
    dataType: "json",
    success: function(response) {
       //set the userAccount and userProfile in the ViewModel
    }
});

I hope this approach will fit in your scenario.

Regards,
Alexander Valchev
Telerik