Javascript Integration

The Node SDK offers many methods and helper functions. The following sections will provide a detailed description for every method and its options.

Common Methods

Common Methods

tr

Translation helper available in the page.

tr(label, description, tokens, options)

# The description parameter can be omitted
tr(label, tokens, options)  

Some examples of how the method can be used:

tr("Hello World")

$('#div').html(tr('Hello World'));
Name Type Required Description
label String true The label to translate
description String false Description of the label that acts as a hint to the translator as well as contextualizes the key to be unique for the description
tokens Object false If label uses data or decoration tokens, the token values will be provided using this parameter
options Object false Additional attributes

Options:

  • source - sets source of strings in your dashboard, source is artificial separation of strings
  • locale - locale of the string it can be sometimes different from default locale
  • target_locale - used to set string to specific local which will not depend on default local, can be used for some text that you always want to see in specific locale
  • skip_decorations - if set to true, content will not be decorated

There are a number of ways the tokens can be passed to the tr method.

The token value can be a simple string:

tr("Hello {user}", {user: "Michael"})  

It can also be an object, in which case the object will be evaluated for the context rules and the result of toString method will be used for display:

tr("Hello {user}", {user: currentUser})  

If you would like to change the way the object is displayed, you can use an array where the first element is the object and the second element is the representation of the value:

tr("Hello {user}", {user: [currentUser, currentUser.name]})  

You can simply pass the name of the attribute as a symbol:

tr("Hello {user}", {user: [currentUser, "name"]})  

You could even define a custom function for extracting the content and pass it in the second element:

function userLink(user){  
  return "<a href='/users/"+user.id+"'>" + user.name + "</a>";
}

tr("Hello {user}", {user: [current_user, userLink]})  

You can also be more explicit and use objects instead of arrays:

tr("Hello {user}", {user: {object: currentUser, attribute: "name"}})  


trl

Translating labels, can be used in views, controllers, and models. trl is the same as tr function but sets the option to never use inline translation for the elements:

trl(label, description, tokens, options)

# The description parameter can be omitted
trl(label, tokens, options)  

Example:

$('#div').attr('alt', trl('Hello World'));

trl will not output decorators, only the translated string. All parameters from tr will work with trl.


tre

Translates an entire element on the page using the DOM parser.

tre(dom_element);  

Example:

tre($('#div'));  


tml_application

Object containing information about the current application.

tml_application  

Properties:

  • key - The application key
  • name - The project name
  • default_locale - The source language locale code (e.g. "en")
  • languages - List of all application languages


tml_current_language

Object containing information about the current selected language.

tml_current_language  

Properties:

  • english_name - The english name of the language (e.g. "Russian")
  • native_name - The native name of the language (e.g. "Русский")
  • locale - The language locale code (e.g. "ru")
  • flag_url - flag icon image url
  • dir - The direction of the language, "ltr" or "rtl" (right-to-left)


tml_begin_block()

Define a section of your site to be available in one locale and not be translated to any other language.

tml_begin_block(options)  

Example:

tml_begin_block({source: "my source 2", locale: "ru", target_locale: "fr"});  
  $('#div').html(tr("Hello world"));
tml_end_block();  

Available Options:

Name Type Required Description
source String false An optional source name for the block
locale String false locale of the block, it can be sometimes different from default locale
target_locale String false used to set the block to a specific local which will not depend on the default locale
tml_block(options, function);  

Example:

tml_block({source: "my source 2", locale: "ru", target_locale: "fr"}, function() {  
  $('#div').html(tr("Hello world"));
});