Adjust the template loader settings to include additional parameters

Currently, I am focused on internationalization (i18n) of my Aurelia components. My goal is to render the translations server-side because our CMS houses the translations and they can be updated even after deployment. To achieve this, I have successfully developed a Java WebFilter that intercepts requests made to Aurelia templates, allowing me to translate strings before serving the template.

Everything seems to be working smoothly until the user decides to switch languages. The language switching triggers a full page refresh, with the chosen language stored in the server-side session. Consequently, even though the template parser detects the language change, the issue arises from the fact that the client-side cache contains the templates with the incorrect translations.

As a temporary solution, I've disabled caching for the templates. However, ideally, I would prefer for the browser to cache the templates but trigger a new request upon a language change event. This way, the templates will always remain up-to-date with the latest translations.

One simple workaround would involve appending the language as a parameter to the template URL when making the request. By doing so, the cached template won't be served if the language has changed. And in case the user switches back to the original language, we can easily retrieve the templates from the cache once more.

I attempted to implement this approach, but couldn't find any documentation related to configuring the default loader for this purpose. Is there a way to set it up to automatically include the language as a parameter in the template URL? Alternatively, could creating a custom loader be a viable solution to achieve this desired behavior?

Answer №1

If you want to enhance your main.js file by implementing a monkey patch for the template loader with language query string logic, consider using the following code snippet:

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

// Define a new method "standardLoadTemplate" to capture the standard logic.
TextTemplateLoader.prototype.standardLoadTemplate = TextTemplateLoader.prototype.loadTemplate;
// Intercept calls to "loadTemplate" and append the query string before invoking the standard method.
TextTemplateLoader.prototype.loadTemplate = function(loader, entry) {
  entry.address += '?' + 'en-US'; // Note: Adjust this based on the selected language
  return this.standardLoadTemplate(loader, entry);
};

export function configure(aurelia) {
  ...

For a practical demonstration, refer to this example:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting JSON data into XML format

When I am converting JSON Values to XML, instead of getting JSON properties as elements of XML, I am receiving "title":"source". The desired output should be <title>source</title>. Can you help me identify what mistake I mig ...

v-autocomplete no selected option

Within my Vue.js 2 and Vuetify component, I am receiving the following data : [ { "anio": 2022, "__typename": "Grupo" }, { "anio": 2020, "__typename": "Grupo" }, { "anio": 2018, "__ ...

Functionality Issue: Submit Button Not Working on Designed Form Select

Through dedication and hard work, I managed to create a customized form with images that display correctly in Firefox, Chrome, and Internet Explorer's compatibility mode. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

Are you curious about the array of elements in React's carousel?

I'm currently in the process of constructing a website using React, and I have a specific challenge related to the "news" section. Within this section, I have a list of three components that represent different news items. These components are housed ...

Preserve the Redux state when transitioning from a popup to the main window

My authentication process involves using auth0 to authenticate users. After selecting a provider, a popup opens for the user to choose an account to sign in with. With the help of the Auth0 sdk, I am able to retrieve user information such as email and nam ...

Sprockets could not locate the file for jquery.atwho

I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...

What could be the reason behind the malfunction of my jQuery .css method?

I am currently working on a taglist that allows users to add and remove tags, connected with mySQL. I have successfully retrieved the tags from the database using an ajax call, but I am unable to perform any operations on them, not even apply a basic style ...

Ajax is unable to reach a file located in the directory UP from the application's main folder

Here is the ajax call I am using: <script> jQuery(document).ready(function(){ jQuery('#compare_btn').click(function(event){ event.preventDefault(); var id=jQuery('#compare_btn').attr('name'); alert(id); ...

Modifying the Color of Individual Items within the Pagination Component in MUI

I am attempting to modify the background color of every item in my Pagination component by utilizing makeStyles. import { Pagination } from "@material-ui/lab"; import { makeStyles } from "@material-ui/core"; const pagination = makeStyl ...

What is the way to assign distinct colors to points in three.js through dat.gui based on their distance from the origin?

Currently, I am developing a 3D Pi Estimator using three.js. You can view the source code at https://jsfiddle.net/fny94e7w/. let num_points = 5000; let in_sphere = 0; let out_sphere = 0; let geometry_point = new THREE.Sp ...

What causes the malfunction of the save function in express?

Today marks my first venture into using Express. I attempted to create a straightforward route, but unfortunately, my save function is not cooperating. Despite scouring similar inquiries on stackoverflow, I have been unable to find a solution. Any assistan ...

What is the best way to retrieve the value of a checkbox element in React.js when submitting a form?

Whenever I try to submit a form, I encounter an issue where I am unable to retrieve the value of the checked boxes (I don't mean the check value but the actual value attribute of the HTML element). Here is an example of my element in the parent compo ...

What could be the reason why my AJAX error is not displaying the exception from my Webmethod?

I am currently utilizing Google Chrome for my work tasks. After referring to , I attempted to throw an exception from a webmethod. However, no output is shown in the console.log. The only information I received is a generic error message from the network ...

Notification for Unsuccessful Login Attempt on the Client Side

In my node.js project, I have implemented a login form that sends data to the server.js file as URL parameters. When the sent data is verified against registered users, the client is successfully logged in. However, I am facing an issue on how to notify th ...

Issues with the Diagonal HTML Map functionality

I'm seeking assistance to implement a unique Google Maps Map on my webpage. I have a particular vision in mind - a diagonal map (as pictured below). My initial approach was to create a div, skew it with CSS, place the map inside, and then skew the ma ...

Error in Discord Bot: discord.js showing TypeError when trying to read the length of an undefined property

I'm currently working on developing a Discord bot and using CodeLyon's Permissions V2 video as a guide for reference. There seems to be an issue in my message.js file which contains the following code: require('dotenv').config(); //cre ...

The ngOnInit function is not triggered upon instantiation of an Injectable class

What could be causing the ngOnInit() method not to be called upon resolution of an Injectable class? Code import {Injectable, OnInit} from 'angular2/core'; import { RestApiService, RestRequest } from './rest-api.service'; @Injectable ...

Recording JavaScript Cookie Visit Counts and Tracking Last Login Dates

I am a beginner in JavaScript and cookies, and I am attempting to create a cookie that can show the number of times someone has visited a website, the date of their last visit, and the expiration date of the cookie. Initially, I tried modifying code from ...

A guide on organizing dates in a datatable using the dd-MMM-yyyy hh:mm tt format

I have encountered an issue with sorting the date column in my datatable. Here is a screenshot showcasing the problem. Below is the code I am using: <table id="tbl" class="table table-small-font table-bordered table-striped"> <thead> &l ...

What is the best way to execute AJAX requests in a loop synchronously while ensuring that each request is completed

I am looking to implement an AJAX loop where each call must finish before moving on to the next iteration. for (var i = 1; i < songs.length; i++) { getJson('get_song/' + i).done(function(e) { var song = JSON.parse(e); addSongToPlayl ...