CODEWITHSUNDEEP
handlebars.js
panzhuli
panzhuli

Reputation: 2940

handlebars - cannot read property of undefined

I have a script that executes once a modal is launched. The js to configure the js object is:

var source = $("#print-script").html();
var template = Handlebars.compile(source);
var data = {
    image:        image,
    title:        title,
    caption:      subtitle,
    category:     template 
};
$("#print-template").html(template(data));

All the variables are set above the object declaration and are working. My html reads:

<script id="print-script" type="text/x-handlebars-template">
<div class="print-only" id="print-template">
  <img src="{image}"/>
  <h2><span class="icon"></span>{category}</h2>
  <h3>{title}</h3>
  <p class="headline">{caption}</p>
  <div class="description">{long_description}</div>
</div>
</script>

I'm getting a Uncaught TypeError: Cannot read property 'image' of undefined. I have confirmed that the object (data) is being populated with content. Thoughts?

Upvotes: 0

Views: 9563

Answers (2)

mu is too short
mu is too short

Reputation: 434585

I'd guess that the problem is right here:

var template = Handlebars.compile(source);
var data = {
    //...
    category:     template  // <------------------- oops
};

Note that template is the compiled template function there so when the template tries to fill in {category}, it will execute the template function. But the template function is expecting some values to fill in the template with and then it is called through {category}, those values won't be there and you'll get a TypeError. Run these two demos with your console open and you should see what's going on:

  1. Error using category: template:
    http://jsfiddle.net/ambiguous/9wEyS/
  2. Works using category: function() { return 'string' }:
    http://jsfiddle.net/ambiguous/YgfZx/

Upvotes: 3

panzhuli
panzhuli

Reputation: 2940

turns out there needs to be another object in the data:

var data = { print:{
                  image:        featuredImage,
                  title:        title,
                  caption:      subtitle,
                  category:     template 
                }
};

Upvotes: 0

Related Questions