javascript - Underscore.js template throwing syntax error in IE 8/9 only -

the site working on using backbone , underscore in conjunction render out page elements data pulled out of json file. working fine , dandy across browsers, until set ie test in compatibility mode ie 9. (i not test in native ie 9 enviortment - rather using ie 10 developer window , setting browser mode ie9 , document mode ie9 standards).

the error specifically:

script1002: syntax error 

with pointer throw e; line of try/catch call @ end of _template function in underscore.js. (this section commented if variable not specified, place data values in local scope) can't imagine why throw call generating actual error, assume there problem somewhere line throwing error in try/catch, , ie returning instead of line made error occur.

full source section is:

// if variable not specified, place data values in local scope. if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';  source = "var __t,__p='',__j=array.prototype.join," +   "print=function(){__p+=__j.call(arguments,'');};\n" +   source + "return __p;\n";  try {   render = new function(settings.variable || 'obj', '_', source); } catch (e) {   e.source = source;   throw e; } 

i have spent amount of time in ie developer window sifting through code line line breakpoints, @ point error occurs, have no idea being done jquery / underscore, except template being called render elements. solution found online far people using reserved words keys in json, not seem case me.

an individual object json file like:

{      "id": "1",     "title": "project title",     "client": "client name",     "scope": "design , producion",     "projectcode": "homeent",     "projecttype": "home entertainment",     "description": "blah blah blah",     "video" : "false",     "mainimg": "images/gallery-he/project.jpg",     "fullimg": "images/gallery-he/project-full.jpg" } 

the 2 types of templates used in html are:

<script id="projecttemplate" type="text/template">   <div class="<%= projectcode %>-box" rel="<%= id %>">       <div class="gradient-strip <%= projectcode %>" ><%= projecttype %></div>       <img src=<%= mainimg %> alt="<%= title &>" class="project-img">   </div> </script>  <script id="projectmodel" type="text/template">   <div class="model-frame" rel="<%= id %>" style="display:none">     <div class="model-gradient <%= projectcode %>"><%= projecttype %></div>     <div class="close-button"></div>      <a class="model-left-arrow"></a>     <img class="fullart" src="<%= fullimg %>" alt ="<%= title %>" />     <a class="model-right-arrow"></a>      <div class="model-text-block">         <p class="model-text"><span class="bolded"><%= title %> </span></p>         <p class="model-text"><span class="bolded">client: </span> <%= client %></p>         <p class="model-text" style="padding-bottom:10px;"><%= scope %></p>         <p class="model-text"><%= description %></p>     </div>    </div> </script> 

even selective commenting, not able deduce of these problem child, commenting out 1 broke other, , vice versa.

last, view code:

var projectmodelview = backbone.view.extend({     tagname: "div",     classname: "model-wrap",     events: {         // events here, removed save space      },     initialize: function() {         this.template = _.template($(this.options.templ).html());     },     render: function(){         this.$el.html(this.template(this.model.tojson()));         return this;     },     // added functions here (removed save space)   });    var projectview = backbone.view.extend({     tagname: "div",     classname: "project-wrap",     initialize: function () {         this.template = _.template($('#projecttemplate').html());     },     render: function () {         this.$el.html(this.template(this.model.tojson()));         return this;     },     events: {         // events...     },     // added functions...   });    var projectmodellistview = backbone.view.extend({     el: '#modellist',     initialize: function() {       this.collection = masterprojectlist;       this.render();     },     render: function() {       this.$el.html("");       this.collection.each(function(project) {             this.renderitem(project);       }, this);     },     renderitem: function(project) {       var isvideo = project.get('video');       if (isvideo == "true") {           var projectmodelview = new projectmodelview({ model: project, templ: '#videoprojectmodel' });         this.$el.append(projectmodelview.render().el);       } else {         var projectmodelview = new projectmodelview({ model: project, templ: '#projectmodel'});         this.$el.append(projectmodelview.render().el);       }     }   });    var projectlistview = backbone.view.extend({     el: '#projectlist',     initialize: function() {       this.collection = masterprojectlist;       this.render();     },     render: function() {       this.$el.html("");       this.collection.each(function(project) {             this.renderitem(project);       }, this);     },     renderitem: function(project) {       var projectview = new projectview({ model: project });       this.$el.append(projectview.render().el);     }   }); 

sorry text, @ complete loss aspect causing fail in ie 8 / 9, unsure need modifying. ideas making underscore go crazy in specific browser versions?

you can see site here:

http://www.thecrpgroup.com/crpweb/promo-site/

thanks.

looks there wrong closing bee string in <script id="projecttemplate"

<img src=<%= mainimg %> alt="<%= title &>"                                         ^---- supposed % 

also don't forget quotes src (ie not well)

if not intentional or typo. ie8/ie9 behaves real bad such typos.