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

Questions
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.

6

When placing Template7.registerHelper(‘fn_price’, function (disp_price) {…}); before var app = new Framework7({…}); in app.js file, I got the following error “Uncaught ReferenceError: Template7 is not defined”.

I am using “import Framework7 from ‘framework7/framework7.esm.bundle.js’;” on the top of app.js file and “module.exports = [‘fn_price’];” in template7-helpers-list.js file.

Please help. Many thanks.

1 Like
7

In JS modules you also need to do:

import Template7 from 'template7';

in the beginning of the file

1 Like
8

My issue is resolved. Many thanks.

9

Template7 customer helper function doesn’t work in index.html but work in other views, such as home view.

Does anyone have the same issue like me?
How to make Template7 function work in index.html? Many thanks.

Regards,
Yun