V6 template7 not rendering

1

in my app.js I add manually the template7
i am using webpack and v6 in v5 it was working perfectly!

import i18next from 'i18next';

import Template7 from 'template7';

Template7.registerHelper("t", function (i18next_key) {
  var result = i18next.t(i18next_key);
  return result;
});
...

i18next.init({
    lng: 'en',
    debug: true,
    resources: {
      en: {
        translation: {}
      },
      en: {
        translation: {
          loginnow: "login now",
        }
      },
      es: {
        translation: {
          loginnow: "inicia session ahora",
        }
      },
    }
  },
  function (err, t) {
    if (err) return console.log(err);
    console.log('i18n initialized!');
  });

in my html

{{t 'loginnow'}}

the output showing {{t ‘loginnow’}} not rendering it as “login now”, what am i missing?
no errors in console whatsoever! my page is a component page too as before with v5.

any ideas!

2

There is no support in v6 components for anything related to Template7 https://framework7.io/docs/migration-from-v5.html#template7

1 Like
3

What is the point of this? Just import your i18next and use ${i18next.t('loginnow')} in component templates directly

1 Like
4

I know it was removed but it says also If your app still needs it, just install it manually…

I need translations for texts and i use i18next for it…

I will try to use it as you sugguest
${i18next.t(‘loginnow’)}

if it works I do not need the template7 for sure let you know if worked!

5

I can confirm ${i18next.t(‘loginnow’)} it is working this way!

I am trying to migrate my registerHelpers from v5 to v6 and get to know the new changes so this helps a lot to understand what needs to be changed!

I think the rest of registerHelpers of v5 will have to be declared as actions inside store.js and see how state now works to update content!

for instance i have these helpers that i use too much in v5

Template7.registerHelper("ifCond", function (v1, operator, v2, options) {
  switch (operator) {
    case '==':
      return (v1 == v2) ? options.fn(this) : options.inverse(this);
    case '===':
      return (v1 === v2) ? options.fn(this) : options.inverse(this);
    case '!==':
      return (v1 !== v2) ? options.fn(this) : options.inverse(this);
    case '<':
      return (v1 < v2) ? options.fn(this) : options.inverse(this);
    case '<=':
      return (v1 <= v2) ? options.fn(this) : options.inverse(this);
    case '>':
      return (v1 > v2) ? options.fn(this) : options.inverse(this);
    case '>=':
      return (v1 >= v2) ? options.fn(this) : options.inverse(this);
    case '&&':
      return (v1 && v2) ? options.fn(this) : options.inverse(this);
    case '||':
      return (v1 || v2) ? options.fn(this) : options.inverse(this);
    default:
      return options.inverse(this);
  }
});

Template7.registerHelper('slice', function (context, block) {
  var ret = "",
    offset = parseInt(block.hash.offset) || 0,
    limit = parseInt(block.hash.limit) || 5,
    i = (offset < context.length) ? offset : 0,
    j = ((limit + offset) < context.length) ? (limit + offset) : context.length;

  for (i, j; i < j; i++) {
    ret += block.fn(context[i]);
  }

  return ret;
});

Template7.registerHelper('rating', function (rating) {

  var rating = parseInt(rating);

  switch (rating) {
    case 0:
      return 0;
    case 1:
      return 20;
    case 2:
      return 40;
    case 3:
      return 60;
    case 4:
      return 80;
    case 5:
      return 100;
    default:
      return 0;
  }


});

it wil be good to know in v6 this kind of changes that needs to be done in order to work in v6 in a working sample to migrate all helpers at once and avoid using template7 at all in the future!

thanks!

6

For those who find this useful when migrating to v6 and you were using template7 for your helpers I wrote this sample below that works perfectly in v6.

Due to the lack of samples showing how to do the migration to v6 for some things like template7 and helpers i decided to convert this helper to v6 for its use to show others the convertion.

before in v5 with template 7 inside app.js

Template7.registerHelper('slice', function (context, block) {
  var ret = "",
    offset = parseInt(block.hash.offset) || 0,
    limit = parseInt(block.hash.limit) || 5,
    i = (offset < context.length) ? offset : 0,
    j = ((limit + offset) < context.length) ? (limit + offset) : context.length;

  for (i, j; i < j; i++) {
    ret += block.fn(context[i]);
  }

  return ret;
});

now in the html you can simply write:

      <!-- limit array -->
      ${like.slice(0, 3).map((like) => $h`
        <li>${like}</li>
      `)}

I hope this help others to migrate their helpers!