Mustache.js splits an HTML attribute between many HTML attributes between whitespaces. How can I keep the attribute as it is ?
The Object to render (width contains whitespaces)
cardpool = {
width:"col-md-offset-3 col-md-6 col-sm-4"
}
The template to use
<div class={{width}}>
</div>
The wrong result (Mustache.js splits the attributes between the whitespaces) :
<div class="col-md-offset-3" col-md-6="" col-sm-4="">
</div>
The expected result (I want to keep the whitespaces in the attribute)
<div class="col-md-offset-3 col-md-6 col-sm-4">
</div>
Do you have a solution to get the expected result ?
Thank you for your help.
This isn't Mustache's fault. Your template is rendered to this:
<div class=col-md-offset-3 col-md-6 col-sm-4>
</div>
Notice the lack of any quotation marks around your class names. A browser can internally convert this to what you're seeing (I'm guessing that you are inspecting the generated data inside your browser's dev tools).
Your template should include the quotation marks around the variable if you want to group the class names into a single class attribute value:
<div class="{{width}}">
</div>
Mustache is (mostly) agnostic about the context in which it's used, so it doesn't know that attributes in HTML should be surrounded by quotation marks if the values contain whitespace. Hence, you need to add those yourself.