I'm using the Mustache template engine in a project, and I've run in to an issue where I have the same attribute name in different contexts, and I'm wondering if there is a way to specify only the attribute from the local context, without changing the name of the attribute.
Consider having this data:
{
title: 'Hello World',
href: 'http://example.com',
socials: [
{
label: 'Twitter',
href: 'http://twitter.com'
},
{
label: 'Facebook',
}
]
}
The issue here is that the href attribute is available in two different contexts which will cause problems if you try to use this conditionally, like this:
<div>
<h1>{{title}}</h1>
<a href="{{href}}">{{href}}</a>
<ul>
{{#socials}}
<li>
{{#href}}
<!--- In here http://twitter.com will be used for the first Social,
but for Facebook it will use http://example.com.
For Facebook, this value should be empty. --->
<a href="{{href}}">{{label}}</a>
{{/href}}
{{^href}}
<!--- This will never be rendered --->
{{label}}
{{/href}}
</li>
{{/socials}}
</ul>
</div>
Hopefully this demonstrates my issue. What I want is to check ONLY the current context for the variable, not check the parent context as well.
I know I can use {{.}}
to access the current context, but is there a way to access a specific variable in the current context? For example, {{.href}}
(which I have tried, but does not work...)
There is a closed issue about this in the mustache.js repo in GitHub. The consensus there is that it is not supported and likely won't be implemented.
Seems like renaming href
may be your best option. (See somewhat related discussion on this other GitHub issue).