handlebars-i18n icon indicating copy to clipboard operation
handlebars-i18n copied to clipboard

Published 20 hours ago • verified publisher icon Aller-Couleur

How to use with HTML (handlebar template) directly rather than using template for placing the translated variables

Open ags18 opened this issue 3 years ago • 0 comments

Suppose if i have an handle bar template file (.hbs), then how i can substitute my translated variables in that directly rather than using 'template' variable and specifying my html (handlebar template) in that

example

base.hbs base.txt

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>handlebars-i18n Demo</title>
<body>
  <h2>handlebars-i18n Demo</h2>
    <dds-dotcom-shell-container>
    {{> @partial-block }}   // all my template is in files, how do i translate my variables in here
  </dds-dotcom-shell-container>

  <!-- Dependencies: hanldebars, i18next, handlebars-i18n.js -->
  <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/19.3.2/i18next.js"></script>
  <script src="../../dist/handlebars-i18n.js"></script>
  <script>

    'use strict';

    // -- The translation phrases for i18next
    i18next
      .init({
        resources: {
          'en': {
            translation: {
              'key0': 'Change Language to',
              'key1': 'What is good?',
              'key2': '{{what}} is good.',
              'key3WithCount': '{{count}} item',
              'key3WithCount_plural': '{{count}} items',
              'key4': 'Selected Language is:'
            }
          },
          'de': {
            translation: {
              'key0': 'Sprache wechseln zu',
              'key1': 'Was ist gut?',
              'key2': '{{what}} ist gut.',
              'key3WithCount': '{{count}} Gegenstand',
              'key3WithCount_plural': '{{count}} Gegenstände',
              'key4': 'Die ausgewählte Sprache ist:'
            }
          }
        },
        lng: 'en'
      });

    // -- Handlebars' example data object
    let data = {
      sayWhat: 'handlebars-i18n',
      holdKey3: 'key3WithCount',
      holdKey4: 'key4',
      mynumber: 33.333,
      myMmaxDigits: 1,
      myPrice: 12.99,
      myDate: '2020-03-11T03:24:00'
    };

    // -- Init and configure handlebars-i18n
    HandlebarsI18n.init();
    HandlebarsI18n.configure([
      // generic configuration for all languages for number representation:
      ['all', 'NumberFormat', { minimumFractionDigits: 2 }],
      // generic configurations per language for price representation:
      ['en', 'PriceFormat', { currency: 'USD' }],
      ['de', 'PriceFormat', { currency: 'EUR' }],
      // generic configurations per language for date representation:
      ['en', 'DateTimeFormat', { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' }],
      ['de', 'DateTimeFormat', { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: false }],
      // configurations per language with custom formats for date:
      ['en', 'DateTimeFormat', { year: 'numeric' }, 'custom-year-only'],
      ['de', 'DateTimeFormat', { year: 'numeric' }, 'custom-year-only'],
      ['en', 'DateTimeFormat', { year: 'numeric', month: 'numeric', day: 'numeric' }, 'custom-date-short'],
      ['de', 'DateTimeFormat', { year: 'numeric', month: 'numeric', day: 'numeric' }, 'custom-date-short'],
      ['en', 'DateTimeFormat', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }, 'custom-time'],
      ['de', 'DateTimeFormat', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }, 'custom-time']
    ]);


    // ********************************************************
    //I dont want to use this
    let template =
      '<button onclick="changeLang()">{{__ "key0"}} {{#if (localeIs "en")}}German {{else}}Englisch {{/if}}</button>' +
      '<h3>Translations</h3>' +

      '<h4>Simple translation, key given as string:</h4>' +
      '<code>{{{{raw}}}} {{__ "key1"}} {{{{/raw}}}}</code>' +
      '<p>{{__ "key1"}}</p>' +

      '<h4>Translation with variable replacement:</h4>' +
      '<code>{{{{raw}}}} {{__ "key2" what=sayWhat}} {{{{/raw}}}}</code>' +
      '<p>{{__ "key2" what=sayWhat}}</p>'

    // -- Ignore this. It is just a helper to display un-rendered {{code}} between the <code> Tags
    Handlebars.registerHelper('raw', function (options) {
      return options.fn();
    });

    // ********************************************************
    //I dont want to use this, compile my template files instead
    function compile() {
      let compiled = Handlebars.compile(template);
      document.getElementById('demo').innerHTML = compiled(data);
    }

    // -- Switch language function (Button)
    function changeLang() {
      var changeTo = i18next.language == 'en' ? 'de' : 'en';
      i18next.changeLanguage(changeTo).then(function () {
        compile();
      });
    }
    compile();

  </script>
</body>
</html>

template file home.txt

{{#> base }}

  <div class="page-container">
    <dds-card-section-simple>
      <dds-content-section-heading>Page Templates</dds-content-section-heading> <!-- How to translate this text-->
      <dds-card-group>
        <dds-card-group-item href="learn/index.html">
          <dds-card-heading>Learn</dds-card-heading> <!-- How to translate this text-->
          <dds-card-footer slot="footer">
            <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" slot="icon"><!----><path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path></svg>
          </dds-card-footer>
        </dds-card-group-item>
    </dds-card-section-simple>
  </div>

{{/ base }}

ags18 avatar Jun 22 '21 16:06 ags18