I'm using Handlebars with Node, and that works fine:
require('handlebars');
var template = require('./templates/test-template.handlebars');
var markup = template({ 'some': 'data' });
console.log(markup);
That works fine. However, I need to register and use a custom helper in my template. So, now my code looks like this:
var Handlebars = require('handlebars');
Handlebars.registerHelper('ifEqual', function(attribute, value) {
if (attribute == value) {
return options.fn(this);
}
else {
return options.inverse(this);
}
});
var template = require('./templates/test-template.handlebars');
var markup = template({ 'some': 'data' });
console.log(markup);
But now when I run my script, I get
Error: Missing helper: 'ifEqual'
So: how can I define and use a custom helper in Node?
I figured it out. I needed to do this:
var Handlebars = require('handlebars/runtime')['default'];
One what's really cool is, this even works in the browser with Browserify.
However, I found that an even better way (and probably the "correct" way) is to precompile Handlebars templates via (shell command):
handlebars ./templates/ -c handlebars -f templates.js
Then I do this:
var Handlebars = require('handlebars');
require('./templates');
require('./helpers/logic');
module.exports.something = function() {
...
template = Handlebars.templates['template_name_here'];
...
};
Here is the way i did it.
I guess nowadays its a bit different.
const Handlebars = require('handlebars');
module.exports = function(){
Handlebars.registerHelper('stringify', function(stuff) {
return JSON.stringify(stuff);
});
};
then i made a little script to call require on all the helpers just so they get ran.
// Helpers Builder
let helpersPath = Path.join(__dirname, 'helpers');
fs.readdir(helpersPath, (err, files) => {
if (err) {throw err;}
files.filter((f) => {
return !!~f.indexOf('.js');
}).forEach((jsf) => {
require(Path.join(helpersPath, jsf))();
});
});
OR the simple way
require('./helpers/stringify')();
in fact you dont even have to export it as a function you can just not export anything at all and just call require from another js file with out the function params at the end.
Related
I am using following packages for multi-languages solutions.
var i18next = require('i18next');
var i18nFsBackend = require('i18next-node-fs-backend');
var i18nMiddleware = require('i18next-express-middleware');
Since I am using handlebar as my nodejs template engine, that's I can not use i18next t('key') directly in the HTML.
so I created a handlebar helper like following
```javascript
var i18next = require('i18next');
handlebars.registerHelper('t', function(i18n_key) {
console.log(i18next.language)// always undefined, so i18next.t(i18n_key) always return default translation.
var result = i18next.t(i18n_key);
return new handlebars.SafeString(result);
});
```
However, the problem was the function is unable to detect language changed
My Workaround
app.js
```javascript
var i18nextInitCallback = function(error, t){
handlebars.registerHelper('t', function(i18n_key) {
if(app.locals.language !== i18next.language){
i18next.changeLanguage(app.locals.language);
}
var result = i18next.t(i18n_key);
return new handlebars.SafeString(result);
});
};
```
route
```javascript
router.use(function(req, res, next){
res.locals.lng = req.language;
res.app.locals.language = req.language;
next();
});
```
as you can see that on Route I assign res.app.locals.language = req.language;
and then in the handlebar helper function, I use app.locals.language to get the current language and use i18next.changeLanguage() to change the language.
and it worked.
I would like to know if I am doing it right or not?
or if there is a better solution
Using the handle function of the middleware:
app.use(middleware.handle(i18next, {
// options
}));
res.language gets already set for you and a t function fixed to user language of that request.
see: https://github.com/i18next/i18next-express-middleware/blob/master/src/index.js#L48
check out the handlebars sample: https://github.com/i18next/i18next-express-middleware/tree/master/examples/basic-handlebars
I am working on a code gen tool, and I am using Lodash to template the output files. When I try running the resultant function from _.template(XXX) I get
"AppData" (the name of the template variable) is not defined.
I have tried to call temp below with and without the AppData variable and both give me
"ReferenceError: AppData is not defined"
templates.forEach((template) => {
let temp = _.template(template, { AppData: AppData });
output = temp(AppData);
});
This is the AppData object:
let AppData = { clientId: clientId,
appId: applicationId,
intents: ['Testing1',
'Testing2',
'Testing3',
'Testing4'
]};
Here is one of the 3 templates:
<% _.each(AppData.intents, function( intent ){ %>
<transition event="<%=intent%>" target="<%=intent%>">
<state id="<%=intent%>">
<onentry>
<assign location="href_answer" expr="tfs.getKBAPIUrl(DNIS, environment, '<%=intent%>')"/>
<assign location="reason" expr="'<%=intent%>'"/>
<script><![CDATA[presentAnswer(href_answer,reason);]]></script>
</onentry>
</state>
<% }) %>
Stack is not letting me post the output, but it's the function representing the finished template.
Perhaps you should step back and get the lodash to first do the templating first and then once you get the templating work, then introduce more complexity...
var tfsStr = document.querySelector('#tfs-template').textContent;
var compiled = _.template(tfsStr, {
intents: AppData.intents,
_: _
});
I did a little codepen to test the templating
After much head smashing, I realized a simple issue.
I was passing the object incorrectly, and the templates were looking for the wrong thing. In the templates I removed my AppData. object notation and updated the code to look like this. The templates picked up the values correctly.
templates.forEach((template) => {
let temp = _.template(template);
output += temp(AppData);
});
A bit of a rookie mistake, first time using Lodash.
I'm developing a SPA using Knockout.js V3 and RequireJS.
I have ko components written like this:
define(['text!settings.html'],
function( htmlString) {
'use strict';
function SettingsViewModel(params) {
...
}
// Return component definition
return {
viewModel: SettingsViewModel,
template: htmlString
};
});
Now i want to support localization and for that I have duplicated html for each supported language, so for example:
en/settings.html
de/settings.html
se/settings.html
I would like to let the user change a language and refresh the app with the new language, is it possible to instruct require text plugin to add the language prefix to all html, so when i write:
text!settings.html
it will actually load:
text!de/settings.html
Not sure if you can let the text plugin prefix the urls. What you might be able to do is create a custom template loader:
var templateFromLanguageUrlLoader = {
loadTemplate: function(name, templateConfig, callback) {
if (templateConfig.languageUrl) {
// Language from config or default language
var lang = templateConfig.lang || 'de';
var fullUrl = lang + '/' + templateConfig.languageUrl;
$.get(fullUrl, function(markupString) {
ko.components.defaultLoader.loadTemplate(name, markupString, callback);
});
} else {
// Unrecognized config format. Let another loader handle it.
callback(null);
}
}
};
// Register it
ko.components.loaders.unshift(templateFromLanguageUrlLoader );
Then your component would look something like this:
define([],
function() {
'use strict';
function SettingsViewModel(params) {
...
}
// Return component definition
return {
viewModel: SettingsViewModel,
template: {
languageUrl: 'settings.html',
language: 'nl' // overwrite default
}
};
});
Eventually i went with a different solution, i just added a variable to the path:
define(['text!' + globals.bundlePath + 'settings.html']
This variable is initialized from session storage (and get's a default if nothing found) and so when a user changes language, i keep it in session storage and refresh the app, and that way the pages are now loaded with the new language.
I want to load a html content with RequireJS like this:
define(function (require) {
"use strict";
return function (id) {
var url = 'text!screens/' + id + '.html';
var html = require(url);
}; });
But I get this error:
Error: Module name "text!screens/home.html_unnormalized2" has not been loaded yet for context: _
If I try it in this way:
define(function (require) {
"use strict";
return function () {
var html = require('text!screens/home.html');
}; });
everything is ok. But this approach isn't very nice due to hardcore tipped url. How can I solve this?
Inline parametric require calls can only run asynchronously for modules that have not been loaded yet, as is your case. The principle is (also note url is in an array):
var url = 'text!screens/' + id + '.html';
require([url],
function(text) {
// use text
},
function(err) { // OPTIONAL BUT GOOD PRACTICE
// handle error
}
);
This has the inconvenience of not beign able to return the value immediately. Also take a look at the principle of promises (implemented by many libraries, jQuery too).
I'm loading a template with the following data:
"slides": [
{
"template": "video",
"data": {
"video": ""
}
},
{
"template": "image",
"data": {
"image": ""
}
}
]
in my template I want to loop over these slides and based on the configured template I want to load a partial
{{#each slides}}
{{> resources_templates_overlay_video }}
{{/each}}
How can I make this partial load dynamically (based on the configured template)?
I'm using the require-handlebars-plugin
As far as I can tell, hbs expects the partials to be known at compile time, which is way before you pass in your data. Let's work around that.
First, pull in your dynamic partials before rendering, something like:
// I required the main template here for simplicity, but it can be anywhere
var templates = ['hbs!resources/templates/maintemplate'], l = data.slides.length;
for (var i=0; i<l; i++ )
templates.push('hbs!resources/templates/overlay/'+data[i].template);
require(templates, function(template) {
var html = template(data);
});
And define a helper that will act as a dynamic partial
define(['Handlebars'], function (Handlebars) {
function dynamictemplate(template, context, opts) {
template = template.replace(/\//g, '_');
var f = Handlebars.partials[template];
if (!f) {
return "Partial not loaded";
}
return new Handlebars.SafeString(f(context));
}
Handlebars.registerHelper('dynamictemplate', dynamictemplate);
return dynamictemplate;
});
Finally, modify your main template to look like
{{#each slides}}
{{dynamictemplate this.template this.data}}
{{/each}}
I found the above answers a little hard to understand - they leak globals, have single character variables, and some odd naming. So here's my own answer, for my (and your) reference:
A dynamic partial using 'hbs', express.js default handlebars implementation:
I used this to make a simple blog making (article-name).md into /blog/(article-name), creating a dynamic partial:
// Create handlebars partials for each blog item
fs.readdirSync('blog').forEach(function(blogItem){
var slug = blogItem.replace('.md','')
var fileContents = fs.readFileSync('blog/'+blogItem, 'utf8')
var html = marked(fileContents)
var compiledTemplate = hbs.compile(html);
hbs.registerPartial(slug, compiledTemplate);
})
// Create 'showBlogItem' helper that acts as a dynamic partial
hbs.registerHelper('showBlogItem', function(slug, context, opts) {
var loadedPartial = hbs.handlebars.partials[slug];
return new hbs.handlebars.SafeString(loadedPartial(context));
});
Here's the route. It 404s if the partial doesn't exist, because the blog doesn't exist.
router.get('/blog/:slug', function(req, res){
var slug = req.param("slug")
var loadedPartial = hbs.handlebars.partials[slug];
if ( ! loadedPartial ) {
return res.status(404).json({ error: 'Article not found' })
}
res.render('blog', {
slug: slug
});
})
/views/blog.hbs looks like:
<div class="blog">
{{ showBlogItem slug }}
</div>
When Handlebars.partials[] returns a raw string it means the partial is not compiled.
I am not sure but my best guess is that Handlebars compiles the partial internally when it compiles the template which includes the partial. So when you use a helper to include a partial then Handlebars doesn't recognize it and it will not be compiled.
You can compile the partial yourself. Don't forget to register the compiled partial or you end up compiling every time the partial is required, which hurts performance. Something like this should work.
var template = Handlebars.partials['templatename'],
fnTemplate = null;
if (typeof template === 'function') {
fnTemplate = template;
} else {
// Compile the partial
fnTemplate = Handlebars.compile(partial);
// Register the compiled partial
Handlebars.registerPartial('templatename', fnTemplate);
}
return fnTemplate(context);