Need to refresh current page (for example after changing language)

[Tomasz Sikora]

How to navigate to the same page with Durandal?

By default, when I'm navigating to the same route, Durandal does not "refresh" the page.

When I will go to some other page and then go back, data is refreshed.

My problem is, that I'm changing language (by setting proper cookie) and after that I want to refresh the page to display content in newly selected language.

What worked but I'm not satisfied with it:

• I've created new "language" module which was setting new cookie on server side and after that i was using router.navigateBack();

The disadvantage was, that for a short period of time view for this language module was visible.

• I've been using location.reload() method, but this caused splash screen to appear.

It would be ideal to just refresh the same page with Durandal's router. I mean something like this: I'm on some page, I change the language by clicking on some link. After that entrance transition is applied (for the same page) and data is presented in new language.

I've been searching for this for whole day, but haven't found any solution to this.

I even tried something like this: router.navigate(router.activeInstruction().config.hash); but it didn't work. (data was not refreshed)

[Garry Taylor]

Please note that this is only a suggestion until a better one comes along.. :)

If your page is currently /application/about

you can navigate to /application/about/1400494219 (this is a Time Stamp for now)

The router will not have this page in cache and force a refresh. 

You will need to update your route to support this argument..

{ route: 'application/about', title: 'Welcome', moduleId: 'viewmodels/aboutus', nav: true },

{ route: 'application/about:id', title: 'Welcome', moduleId: 'viewmodels/aboutus', nav: true },

Regards,

Garry Taylor

[Tomasz Sikora]

Thank you for reply.

I'm afraid it won't work.

Because it will work only for 'about' page as you suggested.

However, those "language change" links are present on every page because they live in main navigation menu.

In that way, I would have to update all my routes like this:

{ route: 'application/about', title: 'Welcome', moduleId: 'viewmodels/aboutus', nav: true },

{ route: 'application/about:id', title: 'Welcome', moduleId: 'viewmodels/aboutus', nav: true },

{ route: 'application/contact', title: 'Contact', moduleId: 'viewmodels/contact', nav: true },

{ route: 'application/contact:id', title: 'Contact', moduleId: 'viewmodels/contact', nav: true },

.....

and so on, which is not an option :(

[Garry Taylor]

Where does the local data live? For example, have you got different Views or is this data within the controller/model?

Example:

{ route: 'application/about', title: 'Welcome', moduleId: 'viewmodels/aboutus.fr', nav: true },

{ route: 'application/about', title: 'Welcome', moduleId: 'viewmodels/aboutus.en', nav: true },

If the data is within the Controller then making this Observable will automatically update the View when the language changes.

Checkout the following, it's a good ready if not helpful : http://stackoverflow.com/questions/16882171/durandal-knockout-app-with-multilanguage-support

Regards,

Garry Taylor

[Excelsior-Charles]

Not sure if this will work because of the language component, but typically "Refreshing" the page's content should be done with KnockoutJS.  For example, If you put your language view-model data into an observable, and when the user selects a new language, you simply change out the data within the observable to use the new language data, then the page will "automatically" refresh its content without the need for Durandal to refresh its route (which as you have pointed out it doesn't do when you are already on that route)

Hope this helps,

[Tomasz Sikora]

Thanks again for your answers.

I was thinking about updating my viewModel with new translated data, but how to know what my current viewModel is?

Let's say that i have a function in my shell.js module: (API on server side changes "culture" cookie from let's say pl-PL to en-US)

changeLanguage: function (culture) {

            return $.post("api/language", { '': culture }, function () {

                // here I should make a call to proper API method to get translated data 

                // and rebind viewModel with it. But which one? In which module?

            });

        }

Can I somehow know in my jquery callback function which module is now presented?

If i could know that, i could invoke it's function to get new data and everything would be fine.

Because it can be any module.

Maybe i can get my current module somewhere in router?

[Tomasz Sikora]

I GOT IT !!

router.activeItem().activate()

This will rebind my currently loaded module viewModel.

I've just tested it. Language is changed immediately in fraction of a second :)

Thank you all for suggestions!

Regards,

Tomek