Comments (11)
Without stepping through your code it would be hard for me to debug this. I guess make sure all you're partials are actually being revived client-side and you probably need to register them via Handlebars.registerPartial()
.
from express-handlebars.
@ericf unfortunately after reviving all templates and partials and running Handlebars.registerParial
I still get the same error:
var Handlebars = require("../../vendor/handlebars"),
exposedData = require("../../exposedData"),
revive = Handlebars.template,
templates = exposedData.get("templates"),
menu = exposedData.get("menu");
exports.run = function() {
//revive all templates and partials
Handlebars.templates = Handlebars.templates || {};
for (var key in templates) {
if (templates.hasOwnProperty(key)) {
Handlebars.templates[key] = Handlebars.template(templates[key]);
}
}
//register partials
Handlebars.registerPartial("menu/item", Handlebars.templates["menu/item.handlebars"]);
Handlebars.registerPartial("menu/category", Handlebars.templates["menu/category.handlebars"]);
//run template
var
template = Handlebars.templates["menu/menu.handlebars"],
html = template(menu);
//debug
console.log(html);
};
results in:
Uncaught TypeError: Object function (Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); partials = this.merge(partials, Handlebars.partials); data = data || {};
var buffer = "", stack1, self=this;
function program1(depth0,data) {
var buffer = "", stack1;
buffer += "\n\n ";
stack1 = helpers['if'].call(depth0, depth0.items, {hash:{},inverse:self.program(4, program4, data),fn:self.program(2, program2, data),data:data});
if(stack1 || stack1 === 0) { buffer += stack1; }
buffer += "\n\n";
return buffer;
}
function program2(depth0,data) {
var buffer = "", stack1;
buffer += "\n\n ";
stack1 = self.invokePartial(partials['menu/category'], 'menu/category', depth0, helpers, partials, data);
if(stack1 || stack1 === 0) { buffer += stack1; }
buffer += "\n\n ";
return buffer;
}
function program4(depth0,data) {
var buffer = "", stack1;
buffer += "\n\n ";
stack1 = self.invokePartial(partials['menu/item'], 'menu/item', depth0, helpers, partials, data);
if(stack1 || stack1 === 0) { buffer += stack1; }
buffer += "\n\n ";
return buffer;
}
buffer += "<div class=\"menu\">\n";
stack1 = helpers.each.call(depth0, depth0, {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
if(stack1 || stack1 === 0) { buffer += stack1; }
buffer += "\n</div>";
return buffer;
} has no method 'call'
Any other suggestions? I'm using the latest handlebars.runtime.js from the official website.
from express-handlebars.
@ericf I've located the issue: the templates returned by hbs.loadTemplates
are actually of type String
! This is only appropriate in your specific usecase where you expose the templates to the client using {{{template}}}
in your handlebars view.
In my case I am actually exposing real objects to the client, and therefore I need it to be an actual function on the server side (not a string). I'm not sure how to accomplish this though.. maybe I have to use eval
?
from express-handlebars.
The following serves as a workaround, but is very ugly and should not be necessary.
(run on the client side)
//revive all templates and partials
Handlebars.templates = Handlebars.templates || {};
for (var key in templates) {
if (templates.hasOwnProperty(key)) {
eval("var templFn = " + templates[key] + ";"); //casts string-denoted function back to function
Handlebars.templates[key] = Handlebars.template(templFn);
}
}
Here the string template function is eval
ed to an actual function.
Why is the function returned as a string anyway?
from express-handlebars.
@ericf I've located the issue: the templates returned by hbs.loadTemplates are actually of type String! This is only appropriate in your specific usecase where you expose the templates to the client using {{{template}}} in your handlebars view.
This is because you want to precompile templates before sending them to the client so you don't need the Handlebars compiler on the client, just the Handlebars runtime.
In my case I am actually exposing real objects to the client, and therefore I need it to be an actual function on the server side (not a string). I'm not sure how to accomplish this though.. maybe I have to use eval?
If you are trying to expose JavaScript to the client, you should look at express-state
, a package I wrote to do just that.
But you could also follow the advanced example here where templates are used server-side for rendering and they are precompiled to shipping to the client. Then on the client they are revived and usable with only requiring the Handlebars runtime.
from express-handlebars.
I think you should separate your concerns here from rendering content on the server vs. bundling up precompiled templates to ship to the client. Both use cases are handled with express3-handlebars
and can use the same template files in your source code.
from express-handlebars.
I'm having trouble following you, maybe we are talking about different things. I am already using the same template files in my source code, both on the server and client side (they are in one folder). I'm already capable of exposing real javascript objects to the client: this is not the problem. I am only using the Handlebars runtime.
Why would the template function have to be encapsulated in a string for the templates to be precompiled? That doesn't make sense to me. The template can be sent to the client as a function using JSON. This is what I'm doing, but because the returned template function is actually a String I have to eval
it on the client side to cast it back to an actual function.
In short: the only problem is that loadTemplates
is returning the templates as strings instead of functions.
from express-handlebars.
Why would the template function have to be encapsulated in a string for the templates to be precompiled?
Handlebars precompiler returns a string. Precompiled templates are not meant to be used a literal strings, but instead become part of a request body or a file's contents. So that makes precompiled templates not usable on the server for rendering.
The template can be sent to the client as a function using JSON.
JSON does not support serializing functions. If you wanted to serialize functions and send them to the client, I would recommend using express-state
which supports that sort of thing (this is why I mentioned it before.)
In short: the only problem is that
loadTemplates
is returning the templates as strings instead of functions.
If you call loadTemplates()
with the precompile
option set to true
it will return strings, because the Handlebars precompiler returns strings. If you want to use functions that can be used server-side to render, then don't specify that option: See loadTemplates()
parameters.
from express-handlebars.
@ericf but I'm rendering the precompiled templates on the client side, not the server side. :)
from express-handlebars.
Like I've said before, without having the actual app to run this not going to work for debugging. I guess start with the advanced example app here, which works, and hopefully you can figure out where you're app is different.
from express-handlebars.
Well, I've worked around it using eval
on the client side, so I guess we can close the issue.
I guess this means that if you don't want to use eval
, you are forced to share the templates in a server side view/template using something like:
<script>
window.templates = {};
{{#each templates}}
window.templates["{{{this.key}}}"] = {{{this.template}}};
{{/each}}
</script>
Instead of using an existing solution to share server side variables with the client side.
from express-handlebars.
Related Issues (20)
- EMFILE: Too many open files when using partials
- A way to remove dynamic data and render the empty view template
- ENOENT: no such file or directory, open '...../views/pages/layouts/main.handlebars' HOT 2
- Partial could not be found HOT 2
- Broken links on README HOT 1
- Not able to render external css which has been bundled using webpack HOT 1
- Builtin helper lookup is showing missing HOT 5
- Security Contact Needed HOT 3
- Question: How precompile actually works? HOT 1
- The “path” argument must be of type string. Received undefined
- TypeError: exphbs is not a function HOT 2
- res.render from subdirectory in views HOT 2
- exphbs is not a function HOT 3
- Chinatown Kuala Lumpur
- 免费注册屈臣氏会员 - KSou
- 82 Vape Asia Taman Sri Manja
- 向设备制造商和移动运营商寻求帮助
- Update README.md as per the configuration. HOT 2
- Calling a partial inside another partial
- glob is not a function HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from express-handlebars.