[SOLVED] [V4] How to register Template7 custom helper before compile?


#1

Using latest version of Webpack template, I am trying to register a custom Template7 helper as follows:

app.js

var app = new Framework7({

});

Template7.registerHelper(‘reverseText’, function(val){
return val.split(’’).reverse().join(’’);
});

template7-helpers-list.js

module.exports = [‘reverseText’];

home.f7.html

<h1>{{ reverseText ‘testing’ }}</h1>

When I execute npm start, I get the following error:

ERROR in ./src/pages/home.f7.html Module build failed (from ./node_modules/framework7-component-loader/lib/index.js): Error: Template7: Missing helper: "reverseText"

Any ideas of how can I solve it?

Thanks in advance.


#2

This issue is solved in F7-CLI 2.0.2. There was a wrong helpers file location, you just need to move template7-helpers-list.js from src/js to src/ folder https://github.com/framework7io/framework7-cli/issues/13


#3

Thank you so much for the solution.

The compilation error has been resolved, but now I am getting a new error in my web browser (Google Chrome v72):

navigate.js:689 Uncaught TypeError: Cannot read property ‘call’ of undefined at eval (home.f7.html:28)

Seems that I am not registering the custom helper in the correct place. I have tried using the init function (app parameter) and I get the same error. Where should I register the helper?

My goal is to implement i18next and use a helper to obtain the strings from the templates. To achieve that, I am using the following code:

var app = new Framework7({

on: {
init: function () {
var f7 = this;
if (f7.device.cordova) {
cordovaApp.init(f7);
}

   i18next
     .use(XHR)
     .init({
       lng: 'en',
       ns: ['app', 'login'],
       defaultNS: 'app',
       backend: {
         loadPath: '../static/locales/{{lng}}/{{ns}}.json'
       },
     }).then(function(t) {
       Template7.registerHelper('t', function(i18n_key) {
         var result = i18n.t(i18n_key);
       
         return new Template7.SafeString(result);
       });
     });
 },

}
});


#4

It must be registered before it got called. So if you have such helper on home page, then it needs to be registered BEFORE you init the app -> before you call new Framework7()


#5

That solved my issue. Thank you so much.