Javascript 下划线.js模板仅在IE 8/9中抛出语法错误
我正在处理的站点使用主干线和下划线从JSON文件中提取的数据中呈现页面元素。在我将IE设置为在IE9的兼容模式下进行测试之前,所有浏览器都运行良好。(我不是在本机IE9环境中进行测试,而是使用IE10开发者窗口,为IE9设置浏览器模式,为IE9标准设置文档模式) 错误具体是:Javascript 下划线.js模板仅在IE 8/9中抛出语法错误,javascript,underscore.js,Javascript,Underscore.js,我正在处理的站点使用主干线和下划线从JSON文件中提取的数据中呈现页面元素。在我将IE设置为在IE9的兼容模式下进行测试之前,所有浏览器都运行良好。(我不是在本机IE9环境中进行测试,而是使用IE10开发者窗口,为IE9设置浏览器模式,为IE9标准设置文档模式) 错误具体是: SCRIPT1002: Syntax Error 用一个指向投掷e的指针;Underline.js中_模板函数末尾的try/catch调用行。(这是注释为“如果未指定变量,则将数据值放入局部范围”的部分)现在我无法想象t
SCRIPT1002: Syntax Error
用一个指向投掷e的指针;Underline.js中_模板函数末尾的try/catch调用行。(这是注释为“如果未指定变量,则将数据值放入局部范围”的部分)现在我无法想象throw调用为何会生成实际错误,因此我假设在try/catch中抛出错误的地方存在问题,IE返回的是它,而不是实际导致错误发生的行
该部分的完整来源是:
// If a variable is 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;
}
我花了大量时间在IE developer窗口中,用断点逐行筛选代码,但在出现错误时,我不知道jquery/下划线实际上在做什么,只是调用模板来呈现元素。到目前为止,我在网上找到的唯一解决方案是人们在JSON中使用保留字作为键,但我的情况似乎不是这样
一个单独的对象是JSON文件,该文件如下所示:
{
"id": "1",
"title": "Project Title",
"client": "Client Name",
"scope": "Design and 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"
}
HTML中使用的两种类型的模板是:
<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>
抱歉,这是这么多的文字,但我完全不知道是什么方面导致这在IE 8/9中失败,所以我不确定具体需要修改什么。有什么想法会让下划线在特定的浏览器版本中变得疯狂吗
您可以在此处看到该网站:
谢谢。看起来
我的错误中有一个错误的结束字符串,我不知道下划线.js模板是如何工作的well@JasonSperske.. 这就是下划线如何使用蜂字符串来封装数据。。。它不是ASP.NET。。不过,它看起来与您在ASP.NET中考虑的类似:)人。就这样。为IMG添加引号并修复模板结束标记修复了它。非常感谢你。我相信明天我会觉得很有趣,我花了几个小时在JS代码中,而问题归结为HTML中的一个愚蠢类型。@DrHall。。尤其是IE。拥有第二双眼睛总是有帮助的;)
var ProjectModelView = Backbone.View.extend({
tagName: "div",
className: "model-wrap",
events: {
// events are here, removed to 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 are here (removed to 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);
}
});
<img src=<%= mainImg %> alt="<%= title &>"
^---- Supposed to be %