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

Databinding issues

5 Answers 29 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Huw Lloyd
Top achievements
Rank 1
Huw Lloyd asked on 12 Feb 2014, 12:13 PM
Hi,

I have a simple login screen where user enters any username and any password... The entered values are stored in localStorage using setItem.

// Set local storage values
         localStorage.setItem("Username", username);
         localStorage.setItem("Password", password);
         localStorage.setItem("DisplayName", "Woot Woot - " + username );
         utils.navigate("#menu-view");

I then navigate to a different screen which has a ViewModel and a single property that reads the value from localStorage and displays it on the screen.

define(["kendo"], function (kendo) {
     
    return {
 
        init: function (initEvt) {},
        beforeShow: function (beforeShowEvt) {},
        show: function (showEvt) { },
        viewModel: kendo.observable({
            displayName: localStorage.getItem("DisplayName")
        })
 
    };
});


I can see from debugger that the values are correctly being stored when I click sign in, but sometimes (most times infact) when I navigate to the second screen the values are not shown, or an old value is shown.... It is kind of like I need to refresh the datamodel from localStorage when I init, beforeShow, or show the second view...

Can anyone shed any light on what I am missing... sample app developed in VS extension and available if required, but i cant attach cos it is > 2mb and not an image!!

Many thanks

5 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 13 Feb 2014, 03:21 PM
Hi Huw,

from the code posted it seems like the ViewModel definition (and the displayName assignment) is evaluated when the project is initialized. Updating the localStorage is not going to update the ViewModel field. The correct approach in this case is a calculated field instead.

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Huw Lloyd
Top achievements
Rank 1
answered on 13 Feb 2014, 11:44 PM
Thanks, that has helped me a bit I think, I now use

viewModel: kendo.observable
      ({
          // ViewModel code
          displayName: function () { return localStorage.getItem("DisplayName"); }
      })

as the view model for my second page.... 

I can see that the displayName is now correctly set the first time I log in using my login page, however, if I change my log in user, which correctly updates the local storage, this does not trigger the displayName property of the second page to be updated. 

I still need a way of forcing the viewModel to refresh itself, or I need a way of killing the view when I log out so that when I log in  with different credentials, the second view is recreated and this the model is refreshed.

Any ideas?
0
Petyo
Telerik team
answered on 18 Feb 2014, 08:54 AM
Hello Huw,

In that case, you can trigger the ViewModel change event manually - please check this example.

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Huw Lloyd
Top achievements
Rank 1
answered on 05 Mar 2014, 02:52 AM
Thanks for the above, I see from your example that you are using a button to force the update --- I however want to force the update when the page is shown "show" event on the view, however when I do this then nothing changes and the line in my view model that retrieves the value for the calculated field is never called again after the initial initialisation of the view

I cant believe this is not a common request and struggle to see why it is proving  so difficult to refresh the view model and hence the view when it becomes visible again

How would you adjust your example to make it work when the page goes out of focus and comes back into focus as it where.

Many thanks




0
Petyo
Telerik team
answered on 07 Mar 2014, 04:55 PM
Hi Huw,

The exact callback (or view navigation) should not matter in that case - please check an updated version of the example above. If your case is different, please update the jsbin with it - we will take a look. 

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Huw Lloyd
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Huw Lloyd
Top achievements
Rank 1
Share this question
or