Search code examples
javascriptjqueryjquery-pluginsjquery-templates

How do I embed data into jQuery template attribute

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.

Solution

  • 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.