模板中脚本标记的IE错误

Question

I have the following script tag inside my Handlebar/Mustache template :

<script type="text/javascript">
        $(function() {
            $(".enable-checkbox").click(function(e) {
                if ($(this).parent().attr("for") == "Webpage") {
                    $('#Webpage').attr("value", $(this).is(":checked")); // Set true/false.                    
                }                    
                if ($(this).parent().attr("for") == "Unsubscribe") {
                    $('#Unsubscribe').attr("value", $(this).is(":checked"));
                }
            });
        });
    </script>

This works perfectly in Chrome and FF. However, on IE - I get an error:

Error: Could not complete the operation due to error 80020101.

After some research I figured out that the above error is due to the script tag my template. If I remove the script tag, it works in IE.

Can anyone suggest a way to get this working in IE?

PS: Moving the contents of the script tag into the outer/main page that loads this script is not an option.

Answer 1

You can create templates in your JavaScript directly (without the need for a script tag)

App.templates = {

    template1: "{{#stooges}}" +
               "<b>{{name}}</b>" +
               "{{/stooges}}",

    template2: "{{#shows}}" +
               "<b>{{title}}</b>" +
               "{{/shows}}"

};

And refer to your template like so:

var output = Mustache.render(App.templates.template1, view);