Render HTML Tag attribute using mustache
<p>In my mustache template I do have something like:</p>

<pre><code>&lt;div {{attr}}="{{attrVal}}"&gt;&lt;/div&gt;
</code></pre>

<p>Rendering this using </p>

<pre><code>Mustache.render(template, {attr : 'data-test', attrVal : 'test'})
</code></pre>

<p>does produce</p>

<pre><code>&lt;div ="test"&gt;&lt;/div&gt;
</code></pre>

<p>I expect to get something like</p>

<pre><code>&lt;div data-test="test"&gt;&lt;/div&gt;
</code></pre>

<p>Isn't it possible to render attribute name inside of a tag using Mustache? </p>

<p><strong>UPDATE</strong></p>

<p>I figured out the problem. I define my HTML Mustache Templates inside custom <code>&lt;template&gt;</code> tags in my document. For example:</p>

<pre><code>&lt;template id='myTemplate'&gt;
    &lt;div {{dataAttr}}="{{dataAttrValue}}"&gt;&lt;/div&gt;
&lt;/template&gt;
</code></pre>

<p>When getting the template using <code>document.querySelector("#myTemplate").innerHTML</code> the browser does convert the <code>{{dataAttr}}</code> to <code>{{dataattr}}</code> because attributes are case insensitiv. So calling</p>

<pre><code>Mustache.render(
    document.querySelector("#myTemplate").innerHTML, 
    { dataAttr : 'data-attr', dataAttrValue : 'test'}
);
</code></pre>

<p>Results in </p>

<pre><code>&lt;div ="test"&gt;&lt;/div&gt;
</code></pre>