Skip to content

Making Partials aware of parent elements #780

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mherlund opened this issue Apr 3, 2014 · 2 comments
Closed

Making Partials aware of parent elements #780

mherlund opened this issue Apr 3, 2014 · 2 comments

Comments

@mherlund
Copy link

mherlund commented Apr 3, 2014

This request is to either make Partials aware of parent items or to give the ability to inject templates into other templates.

Imagine a data structure like:

{
    "People": [
        {
            "Name": "Bob",
            "Vehicles": [
                {
                    "Type": "Car",
                    "ID": 1
                },
                {
                    "Type": "Truck",
                    "ID": 2
                }
            ]
        },
        {
            "Name": "Tom",
            "Vehicles": [
                {
                    "Type": "Truck",
                    "ID": 1
                },
                {
                    "Type": "Truck",
                    "ID": 2
                }
            ]
        }
    ]
}

And some reusable template code for the data structure:

<script id="entry-template" type="text/x-handlebars-template">
    {{#People}}
    <div id="{{Name}}">
        {{#Vehicles}}
            {{> inject}}
        {{/Vehicles}}
    </div>
    {{/People}}
</script>

Some custom template code that would be entered in and could change depending on how someone wants to use it, but still references parent elements (Name).

<script id="inject" type="text/x-handlebars-template">
       {{../Name}} 's {{Type}}    
</script>

Script to compile:

<script>
$(function() {
    var source = $('#entry-template').html();
    var template = Handlebars.compile(source);
    var html = template(jsonData);
    $('body').append(html);


    var source2 = $('#inject').html();
    var template2 = Handlebars.compile(source2);

    Handlebars.registerPartial('inject', template2);
</script>

In this example the ../Name is not found in the inject template. I need a way to be able to insert a partial template into a reusable template and still get values higher in the tree. The injectable template would be user defined so I don't know what elements they may need, but they need access to everything.

@kpdecker
Copy link
Collaborator

We've chosen to not support ../ syntax for partials as it can lead to a number of confusing behaviors. The 2.0 code line allows you to pass in arbitrary parameters to your partial, so you can provide access to the data that you need, i.e. {{> foo parentName=name}}.

Discussion on these design decisions in #182

@mherlund
Copy link
Author

I understand the reason behind not supporting the ../ syntax. Is there or can there be a way to add additional external template code before it compiles?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants