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: {
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: {
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
>