Question

I have the following jQuery-tmpl template:

<script id="month-template" type="text/x-jquery-tmpl">
    <div style="width:${width};">
        <div>Hello</div>
    </div>
</script>

It is used by the following script:

$("#month-template").tmpl({"width":30}).appendTo($("#containerId"));

I expect to see this output:

<div style="width:30;">
    <div>Hello</div>
</div>

But I get this:

<div style="">
    <div>Hello</div>
</div>

Is there some special way to embed attribute values in a template?
I am new to tmpl – maybe I have missed something obvious.

Answer 1

Use 30px instead of 30.

jQuery automatically converts integers to the correct CSS units when using .css() but since it’s a template (not CSS-specific) you need to specify the units yourself.