Handlebars debug missing {{property}} of model

Question

I would like to see in the console some kind of output if a template doesn't get all {{properties}} (for debugging)

e.g. If a template

<script type="text/x-handlebars" id="demo">
    <h1>{{name}}</h1>
    <p>{{desc}}</p>
</script>

is called with a model

{
  name:"Max",
}

there should be an output like console.warn

Template "demo" could not find property "desc"

Is there any helper, callback, ... that is called every time a Handlebars expression like {{property}} is called?

Microfed Microfed · Accepted Answer · 2014-10-17T01:22:21

You can do whatever you like with javascript. But do it carefully. :)

There are many way to achieve your goal depending on what you really need and how many time you can spend on hacking ember/handlebars/ember-data packages.

First and easiest variant is to override render method of SimpleHandlebarsView/_HandlebarsBoundView, which displays simple binded values (there are few other views: for @each, with, etc). This is simple sequence: override method, call an old method, check the result of getting value for rendering, console.warn if result === undefined. You can't get template name inside that method, but you can get parent view for rendered value. So, I suggest to turn on LOG_VIEW_LOOKUPS to easily match views with templates.

Example of console logs:

Rendering application with default view <(subclass of Ember.View):ember226> Object {fullName: "view:application"} 
Rendering index with default view <(subclass of Ember.View):ember251> Object {fullName: "view:index"}
Rendering <(subclass of Ember.View):ember251> , property is undefined: model.undefined

JSBin with example.

Another way is to override handlebarsGet method from ember-handlebars-ext package: https://github.com/emberjs/ember.js/blob/v1.7.0/packages/ember-handlebars/lib/ext.js#L75.

Third, if you need to catch accessing to undefined properties of Ember.Objects, you can override unknownProperty method for those objects.

If you need to check a rendered data quickly, you can use {{log model}} method in Handlebar's template.

You can get deeper into patching and rewriting core of Ember, of course. But I advise not to rely much on inner structure of libraries. Good luck!

Handlebars debug missing {{property}} of model

2 Answers