Sign In Register

How can we help you today?

Start a new topic

Creating Handlebars helpers

Handlebarsjs.com discusses creating helpers (using Handlebars.registerHelper) which I gather needs to go in an external js file. Is it possible to do this within the dynamic forms and if so, how?


I'm very new to dynamic forms but finding them a very powerful way to manage user data. I've never seen Handlebars before.


3 people have this question
1 Comment

Bump on this!


So I was messing around with my management screen stuff and I had a need for something like the handlebars "lookup" helper, but that worked on paths. It's for a table generation system. I describe the columns in my javascript quadrant, and then write some GSML with handlebars to turn it into an HTML table, with #each and given the data rows posted in the scriptData. Unfortunately some stuff is not a direct property, for example in a table of players I might have a column displaying "location.country". The {{lookup}} helper is: f(e,t){return e&&e[t]} so it will not work for dotted paths. I wrote an implementation of lookupPath:  

Handlebars.registerHelper('lookupPath', function(obj, path) {
    return path && path.split(".").reduce(function(prev, curr) {
        return prev ? prev[curr] : undefined;
    }, obj);
}); 

Now, how to run this? Well, in my top level management Screen, I can put a <gs-snippet snippet="CSS"></gs-snippet>. This seems to work. It's called "CSS" because I have my CSS in that snippet, and I put my script stuff in there also. It's all wrapped in a (function())(); so it auto executes, registering my helper.


So this works, but unfortunately I can't seem to make it work while I'm editing snippets. There, I guess there is just some default "screen" that just includes the snippet you're working on. The problem seems to be the order of ... Execution? Templating? I can put the same snippet into my snippet GSML quadrants, but it doesn't seem to work reliably. I noticed that in this scenario, my tables are rendered without CSS and then again with my CSS; it seems my snippet is loaded after Handlebars has done its thing. But when I use my lookupPath helper, it can't be found. However, If I fix my Handlebars stuff to not use lookupPath, my lookupPath gets registered OK! But then it's too late!


I did find by poking around in Chrome Developer Tools, that GameSparks does have some extra helpers: "get", and (undocumented) "getPath" and "json". "getPath" looks like it might be useful, but:

  • its parameters are swapped from lookup - it's get <path> <obj>, not get <obj> <path>.
  • it returns a SafeString. not sure what that is for, but instead of...

{{#if highlight}}{{#if (lookupPath player highlight)}}style="color:orange"{{/if}}{{/if}}

... I need ...

{{#if highlight}}{{#if (lookup (getPath highlight player) "string")}}style="color:orange"{{/if}}{{/if}}

  • it crashes if some element of the path can't be found, instead of just returning undefined or null

This is all really frustrating! I can almost get stuff to work ok, but I can't do proper development on the snippets page. I can either use getPath and have it not work very well, or use my lookupPath but then my snippets only work when instantiated from a top level screen.

The CSS problem is similar, and someone else had a thread about it here.

Login to post a comment