Le site sur lequel je travaille utilise backbone et underscore en conjonction pour rendre les éléments de la page à partir de données extraites d'un fichier JSON. Tout fonctionnait parfaitement dans tous les navigateurs, jusqu'à ce que je configure IE pour tester en mode de compatibilité pour IE 9. (Je ne teste pas dans un environnement natif d'IE 9 - j'utilise plutôt la fenêtre de développement d'IE 10 et je règle le mode navigateur pour IE9 et le mode document pour les normes d'IE9).
L'erreur est spécifique :
SCRIPT1002: Syntax Erroravec un pointeur sur le lancer e ; de l'appel try/catch à la fin de la fonction _template dans underscore.js. (Il s'agit de la section commentée comme Si une variable n'est pas spécifiée, placer les valeurs de données dans la portée locale) Maintenant, je ne peux pas imaginer pourquoi l'appel à throw générerait l'erreur réelle, donc je suppose qu'il y a un problème quelque part sur la ligne qui lance l'erreur dans le try/catch, et IE renvoie cela au lieu de la ligne qui a réellement provoqué l'erreur.
La source complète de cette section est la suivante :
// 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;
}J'ai passé beaucoup de temps dans la fenêtre de développement d'IE à examiner le code ligne par ligne avec des points d'arrêt, mais au moment où l'erreur se produit, je n'ai aucune idée de ce qui est réellement fait par jquery / underscore, si ce n'est que le modèle est appelé pour rendre les éléments. La seule solution que j'ai trouvée en ligne jusqu'à présent était que les gens utilisent des mots réservés comme clés dans leur JSON, mais cela ne semble pas être le cas pour moi.
Un objet individuel dans le fichier JSON ressemblerait à ce qui suit :
{
"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"
}Les deux types de modèles utilisés dans le HTML sont les suivants :
<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>Même en procédant à des commentaires sélectifs, je n'ai pas été en mesure de déterminer lequel d'entre eux était l'enfant à problèmes, car le fait de commenter l'un faisait disparaître l'autre, et vice-versa.
Enfin, le code de visualisation :
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);
}
});Désolé, c'est beaucoup de texte, mais je ne sais pas du tout ce qui fait que cela ne fonctionne pas dans IE 8 / 9, donc je ne sais pas ce que je dois modifier en particulier. Je ne sais donc pas ce que je dois modifier spécifiquement. Avez-vous une idée de ce qui pourrait rendre underscore fou dans des versions spécifiques de navigateurs ?
Vous pouvez consulter le site ici :
http://www.thecrpgroup.com/crpweb/promo-site/
Merci.
