Open ags18 opened 3 years ago
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 }}
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
template file home.txt