Undefined data in one partial but not another

[dwilt]

I have 3 partials and 1 data file which are part of the problem.

buttons.json

{
    "showAll": {
        "element": "a",
        "href": "-",
        "text": "Show All"
    },
    "greenFlatSubmit": {
        "element": "button",
        "type": "submit",
        "text": "Submit",
        "color": "green",
        "style": "flat"
    },
    "greenFlatCancel": {
        "element": "button",
        "type": "cancel",
        "text": "Cancel",
        "color": "green",
        "style": "flat"
    }
}

button.hbs

<{{ element }}{{#is element "a"}} href="{{ href }}"{{/is }}{{#if type }} type="{{ type }}"{{/if }} class="bd-button{{#if color }} bd-{{color}}{{/if }}{{#if style }} bd-{{style}}{{/if }}">{{ text }}</{{ element }}>

show-all-button.hbs

<div class="bd-button-container bd-show-all">
    {{>button buttons.showAll }}
</div>

leave-comment-form.hbs

<form class="bd-leave-comment-form" action="#">
    <div class="bd-container bd-user-photo">
        {{>user-photo }}
    </div>
    <div class="bd-container bd-user-message">
        <div class="bd-field">
            <label class="bd-textarea-label" for="">Leave a comment</label>
            <textarea name="#" id="" placeholder="Leave a comment"></textarea>
        </div>
        {{>button buttons.greenFlatSubmit }}
        {{>button buttons.greenFlatCancel }}
    </div>
</form>

Basically, what I have going on here is that I have 2 partials (show-all-button and leave-comment-form) which are including the button partial and passing in data from the buttons JSON file. When I try to grunt, I'm getting an error saying:

Warning: Cannot read property 'element' of undefined Use --force to continue.

So, I removed both button partial calls from both files and I put some logging info at the top of leave-comment-form.hbs:

{{ log "leave-comment-form.hbs" }}
{{ log buttons }}

And when I grunt, I get this:

leave-comment-form.hbs
{ showAll: { element: 'a', href: '-', text: 'Show All' },
  greenFlatSubmit: 
   { element: 'button',
     type: 'submit',
     text: 'Submit',
     color: 'green',
     style: 'flat' },
  greenFlatCancel: 
   { element: 'button',
     type: 'cancel',
     text: 'Cancel',
     color: 'green',
     style: 'flat' } }

So that's good. We know that the leave-comment-form.hbs partial is getting the buttons.json. But when I remove the logging from the top of leave-comment-form.hbs and put it into show-all-button.hbs, I get this error:

show-all-button.hbs
undefined
show-all-button.hbs
{ showAll: { element: 'a', href: '-', text: 'Show All' },
  greenFlatSubmit: 
   { element: 'button',
     type: 'submit',
     text: 'Submit',
     color: 'green',
     style: 'flat' },
  greenFlatCancel: 
   { element: 'button',
     type: 'cancel',
     text: 'Cancel',
     color: 'green',
     style: 'flat' } }

show-all-button is getting called in two places from two different templates. Obviously buttons.json is available to the partial at one of the calls in the one file but not the other one. How could the data only be available to one partial call if it's global data?

[doowb]

@dwilt Is one of the calls to show-all-button inside another handlebars block, like a with or each block? If so, the handlebars data context might be at a child level. This is something I've been struggling with with handlebars compared to mustache.

Will you post the 2 handlebars snippets where you call show-all-button?

[dwilt]

Brian,
Thanks for the quick response. Below are my 2 files calling show-all-button.

filter.hbs (which is included in 6 pages - you can see it being called in the next file below)

<div class="bd-filter">
    <h3 class="bd-filter-heading">{{ heading }}</h3>
    <ul class="bd-filter-list">
        {{#each list }}
        <li>
            <a href="#">{{ @key }} <span class="bd-filter-count">{{ this }}</span></a>
        </li>
        {{/each}}
    </ul>
    {{>show-all-button }}
</div>

a-z-development-all-articles.hbs

---
name: "Development: All Articles"
---

<div class="bd-search-filter-container bd-container">
    {{>search }}
    {{>filter filters.a-z }}
</div>
<section class="bd-main-content bd-container">
    {{>hero content.hero }}
    <section class="bd-section">
        {{>section-header content.all-articles }}
        {{>article-list articles.a-z-development }}
        {{>article-list articles.list-view }}
        {{>show-all-button }}
    </section>
</section>

[doowb]

@dwilt Yeah... it looks like you're setting the data context to be at the filters.a-z level when you call {{>filter filters.a-z}}.

This causes the context to be 2 levels lower than what you need for the buttons... You'd need to get the context back to the level of the buttons with something like... {{>show-all-button ..\..}} but I'm not sure if that'll work and it seems like a bad solution since you might use filter.hbs in another situation that sets the context differently.

I'll comment again if I figure out any other solution.

[dwilt]

Is there a way to get the root context every time?

On May 20, 2013, at 3:59 PM, Brian Woodward notifications@github.com wrote:

@dwilt Yeah... it looks like you're setting the data context to be at the filters.a-z level when you call {{>filter filters.a-z}}.

This causes the context to be 2 levels lower than what you need for the buttons... You'd need to get the context back to the level of the buttons with something like... {{>show-all-button ....}} but I'm not sure if that'll work and it seems like a bad solution since you might use filter.hbs in another situation that sets the context differently.

I'll comment again if I figure out any other solution.

—
Reply to this email directly or view it on GitHub.

[doowb]

Someone put a pull request in on the handlebars project for adding the root context to the with and each helpers... handlebars PR

I don't think there's a way with partials though. I thought that it used to work that way, that it would search up the context until it found what you requested, but that was either just in mustache or they changed it in handlebars. I'll look around some more and see what I can find, but most likely, it's a handlebars issue.

[jonschlinkert]

yeah the syntax for moving up "levels" of context is ../../

[jonschlinkert]

@dwilt you might want to create an Issue over on the Handlebars repo or add your support to the pull request that @doowb pointed to. I'm going to close this for now since it's not an Assemble issue, but feel free to continue the conversation if you need more help