CODEWITHSUNDEEP
javascriptaurelia
Romke van der Meulen
Romke van der Meulen

Reputation: 280

Configure template loader to pass extra parameters

I'm working on i18n of my Aurelia components. I want to render the translations server-side because our translations are stored in a CMS and can be updated post-deploy. I've succesfully written a Java WebFilter that intercepts requests to Aurelia templates and translates strings before returning the template.

All this works very well, until the user switches language. This is implemented as a full page refresh, and the preferred language is stored in the server-side session. So the template parser does pick up the language change. The problem is that the Aurelia templates have already been cached client-side with the wrong translations in them.

One workaround that I've gone with for now is to disable caching for the templates. But ideally, I'd like the browser to cache the templates, until the language changes at which point the templates should be requested again.

A simple solution would be to add the language to the URL of the template request. That way the cached template won't be used once the language has changed. (And if the users decides to change the language back, we can load them from cache again. Hurray!)

I've tried to implement this, however I can't find any documentation on the (default) loader. Can I configure it to add language as a parameter to the template URL? Or can I create a custom loader to add this behaviour?

Upvotes: 1

Views: 187

Answers (1)

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

Try adding this to your main.js to monkey patch the template loader with the language query string logic:

import {TextTemplateLoader} from 'aurelia-loader-default';

// capture the standard logic in a new "standardLoadTemplate" method.
TextTemplateLoader.prototype.standardLoadTemplate = TextTemplateLoader.prototype.loadTemplate;
// intercept calls to "loadTemplate" and add the query string before calling the standard method.
TextTemplateLoader.prototype.loadTemplate = function(loader, entry) {
  entry.address += '?' + 'en-US'; // todo: set based on currently selected language
  return this.standardLoadTemplate(loader, entry);
};

export function configure(aurelia) {
  ...

Here's an example: https://gist.run/?id=de8ec2de79511bf9e873

Upvotes: 2

Related Questions