handlebars partial context

Question

I have an array that contains the information for social buttons (href,alt,img). I created a partial that would cycle through the array and add the objects, here is what I have.

the array:

var social=[
    {

        "url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
        "image":"IMG/media/twitter_16.png",
        "alt":"twitter link"
    },
    {
        "url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
        "image":"IMG/media/twitter_16.png",
        "alt":"twitter link"
    },
    {
        "url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
        "image":"IMG/media/twitter_16.png",
        "alt":"twitter link"
    }
];

The template:

social_partial = '<a href="{{url}}" alt="{{alt}}"><img src="{{image}}"/></a>';

The partial function:

Handlebars.registerPartial('addSocial',social_partial);

and the main template:

<div class="tip_social">
    {{>addSocial social}}
</div>

I'm getting a 'Depth0 is undefined error'. I tried looking for documentation on parials getting a different context , but I have yet to find it.

edit here is a more complete fiddle of it

Solution 1

Same issue for me. Bit of digging and one face-palm later here's what I've found.

tl;dr answer

Be very careful about the context you pass to your partial. If you somehow pass a null, or empty object to your partial you'll get the depth0 is undefined error

Very slightly longer answer

JSFiddle Examples:

• depth0 bug gets triggered http://jsfiddle.net/paulcollinsiii/dAmfc/
• working version http://jsfiddle.net/paulcollinsiii/sMAkT/

The only thing that changed in the working version is I'm passing a valid context to the partial.

BTW a very helpful trick is to use the debug helper from this blog

Answerbot dictator "code example"

<script id="parent">
 <table>
   <thead>
      <tr>
        <th>One</th>
        <th>Two</th>
      </tr>
    </thead>
    <tbody>
    {{#each collection}}
       {{>myPartial nothingHere}} <!-- Broken context -->
    {{/each}}
    </tbody>
 </table>
</script>

The broken context above will cause handlebars to die. For your problem try digging into that with a {{debug}} tag and see if that helps.

For a better code example please just take a look at the jsFiddles. Reposting all the code in here, formatting it to make it pretty looking and making the StackOverflow answerbot dictator happy was a bit much for doing this at work ^_~

Solution 2

I'm not sure what you're doing wrong as you haven't provided enough code to duplicate your problem. However, it isn't hard to make it work. First of all, your main template should be iterating over social and feeding each element to your partial, something like this:

<script id="t" type="text/x-handlebars-template">
    {{#each social}}
        <div class="tip_social">
            {{>addSocial this}}
        </div>
    {{/each}}
</script>

And then you can get your HTML with something like this:

​var t    = Handlebars.compile($('#t').html());
var html = t({social: social}));​​

Demo: http://jsfiddle.net/ambiguous/SsdbU/1/