Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
ags18 opened this issue Jun 22, 2021 · 0 comments
Open

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

ags18 opened this issue Jun 22, 2021 · 0 comments

Comments

@ags18
Copy link

ags18 commented Jun 22, 2021 •
edited

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 }}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ags18