Errant behavior in the {{each}} tag of jQuery Templates in Internet Explorer?

I am building a page using jQuery templates, but getting some inconsistent behavior in IE 8.

I have a checkbox element inside an {{each}} tag, but IE throw开发者_开发问答s an error when I try to append a string to the id.

Here is the HTML fragment:

<script id="filters-template" type="text/template">
<div id="CoinsuranceFilters" class="filters">
<h4><label><input type="checkbox" id="checkall_coinsurance" onclick="checkClass(this, 'coinsurance_items');" class="checkall" /> Coinsurance</label></h4>
{{each Coinsurance}}
<div class="filteritem">
    <label><input type="checkbox" id="${'Coinsurance_' + id}" {{if IsSelected}} checked{{/if}} class="coinsurance_items"/> ${ItemText}</label>
</div>
{{/each}}
</div>
</script>

IE reports: 'id' is undefined

If I change the id field to id="${id}" the error goes away (although it appears to render 2 checkboxes for every 1 it should).

This works with no problems in Chrome and FF 4

This page uses jquery 1.5.2 & jquery-ui 1.8.12

Here is the JSON object that gets passed into the template:

{
    "IndividualQuoteID": "539b9d05-0c78-4c27-b238-9edaaabfb389",
    "Coinsurance": [
        {
            "id": 267,
            "ID": 267,
            "IsSelected": true,
            "ItemText": "70%"
        },
        {
            "id": 266,
            "ID": 266,
            "IsSelected": true,
            "ItemText": "80%"
        },
        {
            "id": 265,
            "ID": 265,
            "IsSelected": true,
            "ItemText": "90%"
        },
        {
            "id": 264,
            "ID": 264,
            "IsSelected": true,
            "ItemText": "100%"
        }
    ]
}

(The id and ID values are there intentionally. This error occurs with any key I try to concatenate with a string inside the {{each}} block)

I never used Jquery templates, but from what I see in your code shouldn't it be like this :

<script id="filters-template" type="text/template">
<div id="CoinsuranceFilters" class="filters">
<h4><label><input type="checkbox" id="checkall_coinsurance" onclick="checkClass(this, 'coinsurance_items');" class="checkall" /> Coinsurance</label></h4>
{{each Coinsurance}}
<div class="filteritem">
    <label><input type="checkbox" id="Coinsurance_${id}" {{if IsSelected}} checked{{/if}} class="coinsurance_items"/> ${ItemText}</label>
</div>
{{/each}}
</div>
</script>

I don't see what the ${'Coinsurance_' + id} syntax would refer to. If i get it right you want the checkbox to have the html id 'Coinsurance_267'.