Why Is Spacebars Template Not Being Completely Rendered? - templates

Question

I've got a strange situation where my template is not rendering every field
In this template everything within the #each renders correctly.
The first {{photographer}} in the h2 is blank, however. Same template. Any ideas?
This happens the same way with a different template too.
this can be seen at http://photo-story.meteor.com/photog/Dean
full code at https://github.com/deanwenick/cf07-stories
Thanks a lot
'<template name="photog">
<h2>These are {{photographer}}'s stories</h2>
{{#each photog}}
<img src="{{photos.[0]}}" alt="great image from a story">
<div class="caption">
<h3>{{storyName}}</h3>
<p>Photographer: {{photographer}}</p>
<p>Editor: {{editor}}</p>
</div>
{{/each}}
</template>'

Answer 1

The photographer's name isn't available outside of the {{#each}} section of the template because the data returned from your photog route's query has no top-level photographer field:
{
"photographer" : "Dean",
"editor" : "Dean",
"votes" : 0,
"photos" : [
"/pics/wenick_20131110_171.jpg",
"/pics/wenick_20131110_182.jpg"
],
"storyName" : "D2BS West 2013",
"_id" : "GCYR9MnYrrvxRSBQB"
}
{
"photographer" : "Dean",
"editor" : "Dean",
"votes" : 1,
"photos" : [
"/pics/wenick_20130409_149.jpg",
"/pics/wenick_20130409_158.jpg"
],
"storyName" : "Bill's Party",
"_id" : "tCrFAm7X6vFSbiadC"
}
You can add another returned data value in the photog route (in client/helpers/router.js) so that it looks like this:
return {
photog: Stories.find( {photographer: this.params.photographer} ),
photographer: this.params.photographer
};
...and then ensure that the line referencing the photographer's name (in client/views/stories/photog.html) is this:
<h2>These are {{photographer}}'s stories</h2>

Answer 2

The whole template is called on an object that is not shown. Lets all call this object top. I assume it looks like this:
{
"photog": [
{
"photographer": "name",
"editor": "name",
"photos": []
},
{
"photographer": "name2",
"editor": "name2",
"photos": []
}
]
}
The {{#each}} loops through the called photog array. Inside the each the variable scope is changed so that you can directly access {{photographer}}.
But outside of the each, which {{photographer}} should the template reference? It doesn't know. One solution would be to hard wire this with a template helper. Add something like this to your javascript:
Template.photog.photographer = function()
{
return "the name";
}