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.

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

1. 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 = 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.

Usage

@intlDate

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

var dateStr = (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>';

or

var tmpl = '<time>{@intlDate val={timeStamp} /}</time>';
var ctx = { timeStamp : (new Date()).getTime() };

Output:

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

Note: Timestamps are always numeric values, passing them as String will fail (see JavaScript Date constructor).

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.004</b>

Basic (de-DE)

Template:

var tmpl = '<b>{@intlNumber val="40000.004" 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>

License

This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.