javascript - Render HTML Tag attribute using mustache -
in mustache template have like:
<div {{attr}}="{{attrval}}"></div> rendering using
mustache.render(template, {attr : 'data-test', attrval : 'test'}) does produce
<div ="test"></div> i expect like
<div data-test="test"></div> isn't possible render attribute name inside of tag using mustache?
update
i figured out problem. define html mustache templates inside custom <template> tags in document. example:
<template id='mytemplate'> <div {{dataattr}}="{{dataattrvalue}}"></div> </template> when getting template using document.queryselector("#mytemplate").innerhtml browser convert {{dataattr}} {{dataattr}} because attributes case insensitiv. calling
mustache.render( document.queryselector("#mytemplate").innerhtml, { dataattr : 'data-attr', dataattrvalue : 'test'} ); results in
<div ="test"></div>
hope code snippet you..
var template = document.queryselector("#template").innerhtml; //mustache.parse(template); // optional, speeds future uses var rendered = mustache.render(template, { attr: "data-test", attrval: "test" }); document.queryselector("#target").innerhtml = rendered;<script src="https://cdnjs.cloudflare.com/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>
Comments
Post a Comment