Databinding issues

[Huw Lloyd]

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

[Petyo]

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

[Huw Lloyd]

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?

[Petyo]

Hello Huw,

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

Regards,
Petyo
Telerik

[Huw Lloyd]

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

[Petyo]

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