dust-helper-intl

dust-helper-intl

Dust helpers for internationalization.

Installation

Browser

1. Install with bower: bower install dust-helper-intl

2. Load the scripts into your page. (It does not matter which order the scripts are loaded in.)

   <script src="dustjs-linkedin.js"></script>
   <script src="dust-helper-intl.js"></script>
   

3. Register the helpers:

   DustHelperIntl.register(dust);
   

Node/CommonJS

1. You can install the helpers with npm: npm install dust-helper-intl

2. Load in the module and register it:

   var Dust = require('dustjs-linkedin');
   global.Intl = require('intl');
   require('dust-helper-intl').register(Dust);
   

   NOTE: Since node (as of 0.10) doesn't provide the global Intl object (ECMA-402) you'll need to provide a polyfill. The intl NPM package can provide this or you can use another.

AMD

1. Install with bower: bower install dust-form-helpers

2. Load in the module and register it:

   define(['dust', 'dust-helper-intl'], function(Dust, DustHelperIntl) {
       DustHelperIntl.register(Dust);
   });
   

Usage

@intlDate

NOTE: We will use the following variables in the examples:

var dateString = (new Date()).toString(); // 'Wed Mar 26 2014 15:18:48 GMT-0700 (PDT)'
var timeStamp = (new Date()).getTime();   // 1395872439650

####Convert from date string Template:

var tmpl = '<time>{@intlDate val="' + dateStr + '" /}</time>';

Output:

<time>3/26/2014</time>

####Convert from timestamp Template:

var tmpl = '<time>{@intlDate val="' + timeStamp + '" /}</time>';

Output:

<time>3/26/2014</time>

####Formatting the output Template:

var tmpl = '<time>{@intlDate val=' + dateStr + ' hour="numeric" minute="numeric" timeZone="UTC"/}</time>',

Output:

<time>3:26 PM</time>

#####Configuration properties

Property	Allowed values
weekday	"narrow", "short", "long"
era	"narrow", "short", "long"
year	"2-digit", "numeric"
month	"2-digit", "numeric", "narrow", "short", "long"
day	"2-digit", "numeric"
hour	"2-digit", "numeric"
minute	"2-digit", "numeric"
second	"2-digit", "numeric"
timeZoneName	"short", "long"

Source.

@intlNumber

####Basic (en-US) Template:

var tmpl = '<b>{@intlNumber val=40000.004 /}</b>',

Output:

<b>40,000.005</b>

####Basic (de-DE)

Template:

var tmpl = '<b>{@intlNumber val=40000 locales="de-DE"/}</b>',

Output:

<b>40.000,004</b>

####Currency (USD) Template:

var tmpl = '<b>{@intlNumber val=40000 style="currency" currency=USD /}</b>';

Output:

<b>$40,000</b>

####Currency (EUR) Template:

var tmpl = '<b>{@intlNumber val=40000 style="currency" currency=EUR /}</b>';

Output:

<b>€40,000</b>

####Currency (JPY)

Template:

var tmpl = '<b>{@intlNumber val=40000 style="currency" currency=JPY /}</b>';

Output:

<b>¥40,000</b>

####Percentages (en-US) Template:

var tmpl = '<b>{@intlNumber val=400 style="percent" /}</b>';

Output:

<b>40,000 %</b>

####Percentages (de-DE) Template:

var tmpl = '<b>{@intlNumber val=400 style="percent" locales="de-DE" /}</b>';

Output:

<b>40.000 %</b>

@intlMessage

NOTE: var ctx is the context passed into the dust template.

####Basic String using _msg Template:

var tmpl = '<p>{@intlMessage _msg=MSG firstName=firstName lastName=lastName /}</p>',
    ctx = {
        MSG: 'Hi, my name is {firstName} {lastName}.',
        firstName: 'Anthony',
        lastName: 'Pipkin'
    };

Output:

<p>Hi, my name is Anthony Pipkin.</p>

####Basic String using _key Template:

var tmpl = '<p>{@intlMessage _key=KEY firstName=firstName lastName=lastName /}</p>',
    ctx = {
        intl: {
            messages: {
                KEY: 'Hi, my name is {firstName} {lastName}.',
            }
        },
        firstName: 'Anthony',
        lastName: 'Pipkin'
    };

Output:

<p>Hi, my name is Anthony Pipkin.</p>

####Formatted String (en-US) Template:

var tmpl = '<p>{@intlMessage _msg=POP_MSG city=city population=population census_date=census_date timeZone=timeZone/}</p>',
    ctx = {
        POP_MSG: '{city} has a population of {population, number, integer} as of {census_date, date, medium}.',
        city: 'Atlanta',
        population: 5475213,
        census_date: (new Date('1/1/2010')).getTime(),
        timeZone: 'UTC'
    };

Output:

<p>Atlanta has a population of 5,475,213 as of Jan 1, 2010.</p>

####Formatted String (de-DE) Template:

var tmpl = '<p>{@intlMessage _msg=POP_MSG locales="de-DE" city=city population=population census_date=census_date timeZone=timeZone/}</p>',
    ctx = {
        POP_MSG: '{city} has a population of {population, number, integer} as of {census_date, date, medium}.',
        city: 'Atlanta',
        population: 5475213,
        census_date: (new Date('1/1/2010')),
        timeZone: 'UTC'
    };

Output:

<p>Atlanta has a population of 5.475.213 as of 1. Jan. 2010.</p>

####String plurals Template:

var tmpl = '<p>{@intlMessage _msg=HARVEST_MSG person=person count=count /}</p>',
    ctx = {
        HARVEST_MSG: '{person} harvested {count, plural, one {# apple} other {# apples}}.',
        person: 'Allison',
        count: 10
    };

Output:

<p>Allison harvested 10 apples.</p>

Template:

var tmpl = '<p>{@intlMessage _msg=HARVEST_MSG person=person count=count /}</p>',
    ctx = {
        HARVEST_MSG: '{person} harvested {count, plural, one {# apple} other {# apples}}.',
        person: 'Jeremy',
        count: 1
    };

Output:

<p>Jeremy harvested 1 apple.</p>