Handlebars.js: A way to get the list of variables from template?

[dsavenko]

Hi everyone,

Is there a way to get the list of variables used in template? I mean if a template has {{varName}}, I'd like to know it. If a template has something like

{{#each listName}}
    {{field1}}
    {{field2}}
{{/each}}

I'd like to know the template expects a list called listName with objects with fields field1 and field2. Is there any API for this?

Thanks,
Dmitry.

[ErisDS]

The closest thing to what you're looking for is using the log helper to output the a particular context (set of template variables):

E.g.{{log this}} - will output the this object to the console, so you can see what properties (and values) are available.

If you know you've got a set of things, and want to output those specifically, you can do {{log things}} instead. It'll work within other blogs for if or each etc.

The docs are here: http://handlebarsjs.com/builtin_helpers.html#log

[nknapp]

Are you looking for a way to build something like a JSON-schema from a Handlebars template to validate the input? I don't think that is possible. Since you can create arbitrary block-helpers, you can never be sure what the context inside a helper-block will actually be and how the expected sub-object for this helper will look like.

[zordius]

You can try to compile a template with your own helperMissing helper to help you collect used variables (you may need to render it with null input) . But, as previous comment said, you may get different results when your templates behaviors against different context.

[dsavenko]

Thanks for the answers.

Yes, I'm trying to build something like a JSON schema from a template to validate the input. I know it's not possible in general. But if I only use the standard helpers and helpers I've written (knownHelpersOnly), I don't see any inherent insuperable problems.

I thought Handlebars might provide a 'standard' (albeit low-level) way to do so. Say, an API for helpers to tell the world what they expect as input, or something like this. Judging by your answers, there is no such way.

I'd like this to be considered as a feature request :)

[jbboehr]

@dsavenko You can parse the template and scan the AST. That technique is used to preload partials in this requirejs plugin, by searching the AST for partial nodes:
https://github.com/SlexAxton/require-handlebars-plugin/blob/master/hbs.js#L224

There is documentation on the AST structure here:
https://github.com/wycats/handlebars.js/blob/master/docs/compiler-api.md

[dsavenko]

@jbboehr thank you, this looks promising!

[jbboehr]

@dsavenko I'd love to see this myself; I was looking for a way to integrate type-checking into my port and a template schema seems like it should help.

[abumalick]

Did you find a solution for this ?
there is this one but I couldn't make it work:

https://github.com/stevenvachon/handlebars-html-parser

[dsavenko]

@abumalick, no, I didn't. The AST parsing approach could work. But it was easier for me to just redesign my flow in a way it doesn't require this feature.

[mulhoon]

For anyone finding this thread, I used a quick and dirty way to check for contained variables

const getHBVars = value => {
  const ast = hb.parse(value)
  let keys = {}

  for (let i in ast.body) {
    if (ast.body[i].type === 'MustacheStatement') {
        keys[ast.body[i].path.original] = true
    }
  }
  return keys
}

const activeKeys = getHBVars('Hello {{person}}! Today is {{day}}')

console.log(activeKeys)
// --> { person: true, day: true }

[mulhoon]

...but a faster way would probably be to use regex on the raw content.

/{{[{]?(.*?)[}]?}}/g

https://gist.github.com/etiennemarais/2597e33168a07a16a5d541db2a991005

[wspringer]

I created Barhandles a couple of years ago. It's certainly not perfect, but it's better than regex parsing. You simply feed it the Handlebars template, and it will use the AST to find variable references.

http://nxt.flotsam.nl/barhandles
https://medium.com/east-pole/advanced-barhandles-4a7e64c1bc0d
https://github.com/wspringer/barhandles

[nknapp]

Closing due to inactivity.

[Joshmamroud]

@wspringer You are the man!

[imryanjay]

I know this is old, but I was able to achieve this with the gist below and thought it could be some use to others. It's still in development, but I am getting some success from it. If you notice any errors, please leave as a comment.

https://gist.github.com/imryanjay/1d91b2c9f768af7c1b1877a51a4a75f0