Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Scoping issue for the internal keys that have the same name as a key in the parent object #342

Closed
alexewerlof opened this issue Nov 13, 2013 · 5 comments
Closed

Scoping issue for the internal keys that have the same name as a key in the parent object #342

alexewerlof opened this issue Nov 13, 2013 · 5 comments

Comments

@alexewerlof
Copy link

When there are nested objects, it is not possible to have similar names for the keys.
Look at the following example where Anna has 4 children and one of her children has 3 children and we want to render them in a menu structure:

<html>
<head>
    <script src="mustache.js"></script>
    <script src="jquery.js"></script>
</head>
<body>
    <aside id="template">
        <nav>
            {{#mom}}
            <ul>
                <li>
                    {{name}}
                    <ul>
                        {{#children}}
                            <li>
                                {{name}}
                                <ul>
                                    {{#children}}
                                        <li>{{name}}</li>
                                    {{/children}}
                                </ul>
                            </li>
                        {{/children}}
                    </ul>
                </li>
            </ul>
            {{/mom}}
        </nav>
    </aside>
<script>
    var family = {
        mom:{
            name: 'Anna',
            children: [
                {name: 'John'},
                {name: 'Richard'},
                {name: 'Betty'},
                {
                    name: 'Harold',
                    children: [
                        {name: 'Mea'},
                        {name: 'Alex'},
                        {name: 'James'}
                    ]
                }
            ]
        }
    };

    $('#template').html(Mustache.render($('#template').html(),family));
</script>
</body>
</html>

It gives the following HTML output:

<nav>
            <ul>
                <li>
                    Anna
                    <ul>
                            <li>
                                John
                                <ul>
                                        <li>John</li>
                                        <li>Richard</li>
                                        <li>Betty</li>
                                        <li>Harold</li>
                                </ul>
                            </li>
                            <li>
                                Richard
                                <ul>
                                        <li>John</li>
                                        <li>Richard</li>
                                        <li>Betty</li>
                                        <li>Harold</li>
                                </ul>
                            </li>
                            <li>
                                Betty
                                <ul>
                                        <li>John</li>
                                        <li>Richard</li>
                                        <li>Betty</li>
                                        <li>Harold</li>
                                </ul>
                            </li>
                            <li>
                                Harold
                                <ul>
                                        <li>Mea</li>
                                        <li>Alex</li>
                                        <li>James</li>
                                </ul>
                            </li>
                    </ul>
                </li>
            </ul>
        </nav>

But it is only Harold that has children not John, Richard or Betty. In other words if a collection doesn't exist it shouldn't be rendered using data from one scope higher! This is unexpected behaviour for Mustache and is wrong no matter what the technical implications are.
@glenpike
Copy link

We ran into this bug this morning. Currently we can workaround, but that's not a long-term solution.

@bobthecow
Copy link

That's not a bug. That's how the context stack works in Mustache. It's in the spec, and it's on purpose, and you would complain even more if it didn't :)

For a (php flavored) explanation of how the context stack works, see variable resolution on the mustache.php wiki.

@glenpike
Copy link

Hmm, okay, I accept your point. It seems that for simplicity's sake, the language is slightly flawed in that variable scope is vague - expecting it to behave like other loops may be too much, e.g.

var = { name:"outside",
    loop: [
        {id: 1, name: "one"},
        {id: 2, name: "two"},
        {id: 3}
    ]
};

<p>{{name}}</p>
<ul>
{{#loop scope_var}}
  <li>{{scope_var.id}} : {{scope_var.name}}</li>
{{/loop}}
</ul>

@mjackson
Copy link
Contributor

As @bobthecow already pointed out, this is a feature, not a bug. Closing.

@bobthecow
Copy link

See mustache/spec#52 for a proposed feature that makes this a lot easier to work with.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@bobthecow @mjackson @glenpike @alexewerlof