How to see all available variables in handlebars template

问题

I'm working on my first Ember.js app and am having some trouble connecting all the dots. It would be really helpful if I could just see all the variables available within a given handlebars template.

There is a related question, but you have to know the variable that is in scope to use it: How do I add console.log() JavaScript logic inside of a Handlebars template?

How can I output all the variables?

回答1:

a good option is to debug the value of 'this' in a template using the Handlebars helpers: 1.

{{#each}}
    {{log this}}    
{{/each}}

or, 2. similar to @watson suggested

{{#each}}
    {{debugger}}
{{/each}}

and then drill in to the Local Scope Variables for 'this' in the Dev Tools

or alternatively, 3. you could log things directly from inside your Controller init method, such as:

App.UsersController = Ember.ArrayController.extend({
    init: function() {
        console.log(this);
        console.log(this.getProperties('.'));
    }
});

回答2:

Make sure you try out Firebug - you'll get a different perspective on things, which I found helpful. But don't abandon chrome completely; you will need the Ember Inspector at some point.

I'm using the same debugging helper everyone recommends, and this is how Chrome displays it:

When I expand the same object in firebug, I get the following info, including the variables I was looking for (sources[]) and some other useful properties I hadn't seen in Chrome.

回答3:

If you really need to dump the variables in your template, you can explore the template AST and output the content of the relevant nodes (see the compiler sources). This is not an easy task because you have to find your way through trials and errors, and the code is quite low-level and there are not so many comments.

It seems Handlerbars doesn't have a shortcut for what you're asking, so the steps would be:

precompile a template (see the command line source, I think the function is called handlebars.precompile())
explore the AST

回答4:

The sample Ember app you mention defines its EmberObjects right in its app.js. So basically, what's available on the objects are the properties that are defined onto them there. (e.g. subreddit has a title, etc).

If you want a globally available way to dump an object's property schema out to the console, one approach would be to create a "debug" helper that walks the members of the passed-in contexts and writes them out. Something like:

Handlebars.registerHelper('debug', function (emberObject) {
    if (emberObject && emberObject.contexts) {
        var out = '';

        for (var context in emberObject.contexts) {
            for (var prop in context) {
                out += prop + ": " + context[prop] + "\n"
            }
        }

        if (console && console.log) {
            console.log("Debug\n----------------\n" + out);
        }
    }
});

Then call it on whatever you want to inspect:

<div>Some markup</div>{{debug}}<div>Blah</div>

This will use whatever EmberObject is in scope, so pop it inside of an {{#each}} if you want to inspect the list elements, as opposed to the object with that list.

回答5:

The variables available within a template are only constrained by the model you are using to render the template.

You should set a breakpoint in your app where you render the template and see what is in your model at that point, which will should you what you have available to put in your template.

回答6:

I created Barhandles a few years ago. It will use the Handlebars parser to produce the AST, and then extract variable references from it. The extractSchema method will — well — extract a schema. That schema is not based on JSON Schema or Joi or anything. It's a homegrown format that captures most of the things you could possibly extract from Handlebars template.

So, this barhandlers.extractSchema('{{foo.bar}}') produces:

{
  "foo": {
    "_type": "object",
    "_optional": false,
    "bar": {
      "_type": "any",
      "_optional": false
    }
  }
}

It will take into account that an {{#if expr}} will automatically make nested references optional. It correctly handles scope changes based on {{#with expr}} constructs, and it allows you to add support for your own custom directives as well.

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

We used it to do validation on the data structures that we passed into the template, and it was working pretty well for that purpose.

来源：https://stackoverflow.com/questions/19800602/how-to-see-all-available-variables-in-handlebars-template

标签

javascript

debugging

ember.js

handlebars.js