Revision 644389 of L10n.setAttributes

Revision slug: Web/API/L10n.setAttributes
Revision title: L10n.setAttributes
Revision id: 644389
Created: Jul 24, 2014, 3:30:21 AM
Creator: stasm
Is current revision? Yes
Comment

Tags:

Revision Content

The setAttributes method may be used to set the data-l10n-id and data-l10n-args attributes on DOM elements.

The L10n API makes use of mutation observers to detect changes to data-l10n-* attributes and translate the affected elements asynchronously. The L10n.setAttributes method is a convenience method which allows to translate DOM elements declaratively. Under the hood, L10n's mutation observer uses the same semantics as the {{domxref("L10n.get")}} method.

Syntax

navigator.mozL10n.setAttributes(element, identifier[, data]);

Parameters

element: The element to be translated.
identifier: The string identifier of the translation to be used for translation.
data: An object with variables to be interpolated into the translation. All members' values must be strings or numbers.

Example

dialer.en-US.properties:

from-contact = Missed call from \{{ contact }}

dialer.js:

var banner = document.getElementById('banner');
navigator.mozL10n.setAttributes(banner, 'from-contact', {contact: primaryInfo.toString()});

L10n.setAttributes is a convenience method which uses the standard Element.setAttribute API. Therefore, the above is equivalent to:

var banner = document.getElementById('banner');
banner.setAttribute('data-l10n-id', 'from-contact');
banner.setAttribtue('data-l10n-args', JSON.stringify({contact: primaryInfo.toString()}));

Specification

Not part of any specification.

Revision Source

<p>{{ non-standard_header() }}</p>
<div class="summary">
 <p><span class="seoSummary">The <code>setAttributes</code> method may be used to set the <code>data-l10n-id</code> and <code>data-l10n-args</code> attributes on DOM elements.</span></p>
</div>
<p>The L10n API makes use of <a href="/en-US/docs/Web/API/MutationObserver">mutation observers</a> to detect changes to <code>data-l10n-*</code> attributes and translate the affected elements asynchronously.&nbsp; The <code>L10n.setAttributes</code> method is a convenience method which allows to translate DOM elements declaratively. Under the hood, L10n's mutation observer uses the same semantics as the {{domxref("L10n.get")}} method.</p>
<h2 id="Syntax">Syntax</h2>
<pre>
navigator.mozL10n.setAttributes(<em>element, identifier[</em>, <em>data]</em>);</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
 <dt>
  <code>element</code></dt>
 <dd>
  The element to be translated.</dd>
 <dt>
  <code>identifier</code></dt>
 <dd>
  The string identifier of the translation to be used for translation.</dd>
 <dt>
  <code>data</code></dt>
 <dd>
  An object with variables to be interpolated into the translation. All members' values must be strings or numbers.</dd>
</dl>
<h2 id="Example">Example</h2>
<dl>
 <dt>
  dialer.en-US.properties:</dt>
</dl>
<dl>
 <dd>
  <pre>
from-contact = Missed call from \{{ contact }}</pre>
 </dd>
</dl>
<dl>
 <dt>
  dialer.js:</dt>
</dl>
<dl>
 <dd>
  <pre class="brush: js">
var banner = document.getElementById('banner');
navigator.mozL10n.setAttributes(banner, 'from-contact', {contact: primaryInfo.toString()});
</pre>
  <p><code>L10n.setAttributes</code> is a convenience method which uses the standard <a href="/en-US/docs/Web/API/Element.setAttribute">Element.setAttribute</a> API.&nbsp; Therefore, the above is equivalent to:</p>
  <pre class="brush: js">
var banner = document.getElementById('banner');
banner.setAttribute('data-l10n-id', 'from-contact');
banner.setAttribtue('data-l10n-args', JSON.stringify({contact: primaryInfo.toString()}));</pre>
 </dd>
</dl>
<h2 id="Specification" name="Specification">Specification</h2>
<p>Not part of any specification.</p>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{domxref("L10n")}}</li>
 <li>{{domxref("L10n.get")}}</li>
</ul>
<section id="Quick_Links">
 <ol>
  <li data-closed="" data-default-state="open"><strong><a href="#">Guides</a></strong>
   <ol>
    <li><a href="/en-US/Apps/Build/Localization">Localization</a></li>
   </ol>
  </li>
  <li data-closed="" data-default-state="open"><strong><a href="#">Properties</a></strong>
   <ol>
    <li>{{ domxref("L10n.language.code") }}</li>
    <li>{{ domxref("L10n.language.direction") }}</li>
    <li>{{ domxref("L10n.readyState") }}</li>
   </ol>
  </li>
  <li data-closed="" data-default-state="open"><strong><a href="#">Methods</a></strong>
   <ol>
    <li>{{ domxref("L10n.get") }}</li>
    <li>{{ domxref("L10n.ready") }}</li>
    <li>{{ domxref("L10n.once") }}</li>
   </ol>
  </li>
 </ol>
</section>

Revert to this revision