In my mustache template I do have something like:
<div {{attr}}="{{attrVal}}"></div>
Rendering this using
Mustache.render(template, {attr : 'data-test', attrVal : 'test'})
does produce
<div ="test"></div>
I expect to get something like
<div data-test="test"></div>
Isn't it possible to render attribute name inside of a tag using Mustache?
UPDATE
I figured out the problem. I define my HTML Mustache Templates inside custom <template> tags in my document. For example:
<template id='myTemplate'>
<div {{dataAttr}}="{{dataAttrValue}}"></div>
</template>
When getting the template using document.querySelector("#myTemplate").innerHTML the browser does convert the {{dataAttr}} to {{dataattr}} because attributes are case insensitiv. So calling
Mustache.render(
document.querySelector("#myTemplate").innerHTML,
{ dataAttr : 'data-attr', dataAttrValue : 'test'}
);
Results in
<div ="test"></div>
In my mustache template I do have something like:
<div {{attr}}="{{attrVal}}"></div>
Rendering this using
Mustache.render(template, {attr : 'data-test', attrVal : 'test'})
does produce
<div ="test"></div>
I expect to get something like
<div data-test="test"></div>
Isn't it possible to render attribute name inside of a tag using Mustache?
UPDATE
I figured out the problem. I define my HTML Mustache Templates inside custom <template> tags in my document. For example:
<template id='myTemplate'>
<div {{dataAttr}}="{{dataAttrValue}}"></div>
</template>
When getting the template using document.querySelector("#myTemplate").innerHTML the browser does convert the {{dataAttr}} to {{dataattr}} because attributes are case insensitiv. So calling
Mustache.render(
document.querySelector("#myTemplate").innerHTML,
{ dataAttr : 'data-attr', dataAttrValue : 'test'}
);
Results in
<div ="test"></div>
-
What you're doing there actually looks correct. As an example, check out: jsbin./rilihasise/1/edit?html,js,console Is it possible
templateisn't defined properly? – balanceiskey Commented Feb 8, 2016 at 14:03 - You are right. Regarding mustache it was correct. The error was caused because of something else (see edited question above). But nevertheless your answer helped me figured out the problem. – phwa4563 Commented Feb 8, 2016 at 14:36
-
4
To prevent HTML parser to interpret your templates as HTML (as they are not) you'd better use
<script>element, for example as<script type='text/template' id='myTemplate'>...</script>– c-smile Commented Feb 8, 2016 at 14:54 -
Thats a good hint. My Application is a Polymer based web application. Inside a polymer Elements HTML
<template>tags are used to define HTML in conjunction with data binding expressions which have slightly the same syntax using{{}}. So for consistency I decided to put mustache HTML templates inside a<template>tag. – phwa4563 Commented Feb 10, 2016 at 7:54 -
1
By WebComponents specification
<template>is valid HTML element - its content gets parsed into [shadow] DOM, etc. But this<div {{dataAttr}}=...of yours is not valid HTML construct so is the problem... – c-smile Commented Feb 10, 2016 at 18:21
3 Answers
Reset to default 1Hope this code snippet will help you..
var template = document.querySelector("#template").innerHTML;
//Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {
attr: "data-test",
attrVal: "test"
});
document.querySelector("#target").innerHTML = rendered;<script src="https://cdnjs.cloudflare./ajax/libs/mustache.js/2.2.1/mustache.js"></script>
<body>
<div id="target">Loading...</div>
<template id="template" >
<textarea style="width:300px">
<div {{attr}}="{{attrVal}}"></div>
</textarea>
</template>
</body>I head the same problem Try the single [']:
<template id='myTemplate'>
<div {{dataAttr}}='{{dataAttrValue}}'></div>
</template>
.....
You can also try using to_html method for the expected output.
const HTML = Mustache.to_html(template, {attr : 'data-test', attrVal : 'test'});
document.getElementById("myTemplate").innerHTML = HTML;
const template = `
<div {{attr}}="{{attrVal}}">
</div>
`
const HTML = Mustache.to_html(template, {attr : 'data-test', attrVal : 'test'});
document.getElementById("myTemplate").innerHTML = HTML;
console.log(document.getElementById("myTemplate").innerHTML);<html>
<head>
</head>
<body>
<template id='myTemplate'>
</template>
<div id="display-output"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/mustache.js/3.1.0/mustache.min.js"></script>
</body>
</html>