3

I want to use a CurrencyValueConverter like the one in the aurelia.io documentation, but localizing the result to Dutch or German, but I don't know how to make all languages available to numeral.

I am able to import the Ducth locale en load it explicitly as follows:

import numeral from 'numeral';
import nl from "numeral/languages/nl-nl";

export class CurrencyValueConverter {
  toView(value, language = "nl-nl") {
    numeral.language(language, nl); // this line loads the nl language definition
    numeral.language(language);
    return numeral(value).format("$0,0.00");
  }
}

But of course, this only works for one language. How can I load multiple languages while avoiding something like

if(language === "nl-nl")
    numeral.language(language, nl);
else if(language === "de-de")
    // etc
Sergi Papaseit
  • 15,999
  • 16
  • 67
  • 101

1 Answers1

4

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

app.html

<template>
  <require from="./currency-value-converter"></require>

  <label>
    Language:
    <select value.bind="selectedLanguage">
      <option repeat.for="language of languages" value.bind="language">${language}</option>
    </select>
  </label>

  <h1>${value | currency:selectedLanguage}</h1>
</template>

app.js

export class App {
  value = 1234567.890123;
  selectedLanguage = 'nl-nl';
  languages = [
    'en-gb',
    'es',
    'et',
    'fi',
    'fr',
    'fr-CA',
    'fr-ch',
    'hu',
    'it',
    'ja',
    'nl-nl',
    'pl',
    'pt-br',
    'pt-pt',
    'ru',
    'ru-UA',
    'sk',
    'th',
    'tr',
    'uk-UA',
    'be-nl',
    'chs',
    'cs',
    'da-dk',
    'de',
    'de-ch'];
}

currency-value-converter.js

import numeral from 'numeral';
import 'numeral/min/languages.min';

export class CurrencyValueConverter {
  toView(value, language = 'nl-nl') {
    numeral.language(language);
    return numeral(value).format('$0,0.00');
  }
}
Jeremy Danyow
  • 26,470
  • 12
  • 87
  • 133
  • I had tried this approach as well, but I get an `Unhandled promise rejection Error: Unknown language : nl-nl(…)` and I don't really see what am I doeing differently than you example :( – Sergi Papaseit Feb 22 '16 at 15:04
  • look at the network tab and filter on `numeral/min/languages.min`... is it loading successfully? Also could try `jspm uninstall numeral;jspm install numeral;` – Jeremy Danyow Feb 22 '16 at 15:16
  • `languages.min` is loaded properly and reinstalling `numerals` doesn't seem to help. – Sergi Papaseit Feb 22 '16 at 15:33
  • hmm... any differences at all between the converter code in my example vs yours? Order of import statements? – Jeremy Danyow Feb 22 '16 at 15:41
  • Nothing so obvious, no. I actually copied your exact converter code, but I keep on getting the same error – Sergi Papaseit Feb 22 '16 at 16:23
  • the only other thing I can think of is maybe the build is screwed up. Does the code in your `dist` folder look right? Does the transpiled converter file have the correct require? – Jeremy Danyow Feb 22 '16 at 23:55
  • Everything looks ok in the transpiled file of the `dist` folder: `System.register(["numeral", "numeral/min/languages.min"], function (_export) { ...}` – Sergi Papaseit Feb 23 '16 at 08:23
  • I'm seeing the same issues as Sergi. On fiddler I see it making 3 calls. /jspm_packages/npm/numeral@1.5.3.js (which is just a require) /jspm_packages/npm/numeral@1.5.3/min/languages.min.js /jspm_packages/npm/numeral@1.5.3/numeral.js So I think its an order issue, when the languages are loaded, numeraljs does not exist yet. How to enforce the dependencies when using import? – Tim Bailey Nov 01 '16 at 23:15