MVVM + DataSource Binding for Profile View

2 posts, 0 answers
  1. Sherman
    Sherman avatar
    21 posts
    Member since:
    Apr 2014

    Posted 22 Jun 2015 Link to this post

    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>

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 25 Jun 2015 Link to this post

    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({
        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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top