Why Is Spacebars Template Not Being Completely Rendered?

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: <a href="/editor/{{editor}}">{{editor}}</a></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";
}