Using mustache to fill in a html tag argument

Question

I'm trying the append an identier (id) to the href below using mustache

Template:

<div id='tmpl'>
    <a href='#product_detail?'{{id}}>link</a>
</div>    

var template = $('#tmpl').html();

Data:

var model = { id: 22 };

Rendering the template using the model data:

var html = Mustache.to_html(template, model);

results in:

<a href="#product_detail?%7B%7Bid%7D%7D">link</a>

If the template is changed to:

<div id='tmpl'>
    <a href='#product_detail?'{{id}}>link</a>
</div>

The resulting template is:

<a href="#product_detail?" 0="">link</a>

The 'problem' seems to be that jQuery is changing the single quotes in the template to double quotes that confuses mustache. Placing the mustache tag outside the quotes doesn't give the right results either. How can this be solved?

Thanks

Answer 1

You need to add the {{id}} in the href, like that :

href="#product_detail?{{id}}"

We used to put our mustache template in a script with type="text/template", i don't know if it will solve your escaping problems but we haven't here.

<script type="text/template" id="tmpl">
   <a href href="#product_detail?{{id}}">link</a>
</script>

If you got some escaping problems use the & before the id like that:

<script type="text/template" id="tmpl">
   <a href href="#product_detail?{{& id}}">link</a>
</script>

Hope it help !