Code Monkey home page Code Monkey logo

Comments (11)

ericf avatar ericf commented on July 29, 2024

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.

tommedema avatar tommedema commented on July 29, 2024

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

tommedema avatar tommedema commented on July 29, 2024

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

tommedema avatar tommedema commented on July 29, 2024

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 evaled to an actual function.

Why is the function returned as a string anyway?

from express-handlebars.

ericf avatar ericf commented on July 29, 2024

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

ericf avatar ericf commented on July 29, 2024

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.

tommedema avatar tommedema commented on July 29, 2024

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.

ericf avatar ericf commented on July 29, 2024

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.

tommedema avatar tommedema commented on July 29, 2024

@ericf but I'm rendering the precompiled templates on the client side, not the server side. :)

from express-handlebars.

ericf avatar ericf commented on July 29, 2024

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.

tommedema avatar tommedema commented on July 29, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.