dust-helper-intl
v1.0.0-beta-1
Published
Dust helpers for internationalization.
Downloads
8
Readme
dust-helper-intl
Dust helpers for internationalization.
Installation
Browser
- Install with bower:
bower install dust-helper-intl
- Load the scripts into your page.
<script src="dustjs-linkedin.js"></script>
<script src="dust-helper-intl.js"></script>
- Register the helpers:
DustHelperIntl.register(dust);
Node/CommonJS
- You can install the helpers with npm:
npm install dust-helper-intl
- 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" |
@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.