Underscore templates not working in IE

Question

I can't figure out why my template wont work in IE (Any version)

Template

<div id="Hero-Right">
<script type="text/html" id="heroItems">                        
      {{ _.each( planet.heroItems, function( heroItem ){ }}
      <div class="item first">
           img src="{{= heroItem.image }}" />
           <div class="item-text">
                {{= heroItem.text }}
           </div>
      </div>
      {{ }); }}
 </script>
 </div>

My data is

var data = {
        heroItems: [
            {
                image: "Images/Top-TV.png",
                text: "Watch the Tv Show"
            },
            {
                image: "Images/Top-Broc.png",
                text: "The Brand"
            }
        ]
     }

To render the template I call the function

function renderTemplate(data) {
    var template = _.template(
             $("#heroItems").html()
         );
    $("#Hero-Right").html(
            template(data)
        );
};

To use moustache delimiter i changed the underscore delimeters using

 _.templateSettings = {
    interpolate: /\{\{=(.+?)\}\}/g,
    evaluate: /\{\{(.+?)\}\}/g,
};

This shows up fine in chrome.

Answer 1

I am assuming you are running an older IE version. In that case:

_.templateSettings = {
    interpolate: /\{\{=(.+?)\}\}/g,
    evaluate: /\{\{(.+?)\}\}/g,     <-- Trailing Comma
};

Remove the Trailing Comma