典型的な「Chrome/FFでは機能しますが、IEでは機能しません」という話。IE9はそれをうまく処理しているようです。
IEコンソールに表示されるのは次の
とおりです。SCRIPT65535：メソッドまたはプロパティへの予期しない呼び出し。
jquery.min.js、3行目文字32461
これは、エラーをトレースするIEプロファイラーのスクリーンショットです。
そして、これが私のNav.jsファイルからのコードです：
// Build nav menu array
var navLinks = [ {"style" : "home" ,"page" : "" ,"name" : "Home" ,"tier" : 1 ,"icon" : "home"},
{"style" : "job-trans" ,"page" : "view/jobTransaction" ,"name" : "Job Transactions" ,"tier" : 1 ,"icon" : "barcode"},
{"style" : "job" ,"page" : "view/job" ,"name" : "Jobs" ,"tier" : 1 ,"icon" : "inbox"},
{"style" : "user" ,"page" : "view/user" ,"name" : "Users" ,"tier" : 1 ,"icon" : "user"},
{"style" : "report" ,"page" : "page/report" ,"name" : "Reports" ,"tier" : 2},// ,"icon" : "signal"},
{"style" : "customer" ,"page" : "view/customer" ,"name" : "Customers" ,"tier" : 2}
];
var jobSearchAttr = $.browser.msie ? "value=\"Enter Job #\" data-browser=\"IE\" style=\"font-size: 16px\"" : "placeholder=\"Enter Job #\"";
var userSearchAttr = $.browser.msie ? "value=\"Enter User ID\" data-browser=\"IE\" style=\"font-size: 16px; padding-left:0;\"" : "placeholder=\"Enter User ID\"";
// Sort array elements into buttons and dropdowns with appropriate elements
var i, t1LinkArray = [], t2LinkArray = [], t2ClassArray = [];
for (var i = 0; i < navLinks.length; i++) {
switch(navLinks[i]["tier"]) {
case 1:
t1LinkArray.push( "<li class=\"" + navLinks[i]['style'] + "\"><a href=\"#/" + navLinks[i]['page'] + "\"><i class=\"icon-" + navLinks[i]['icon'] + " icon-white\"></i> " + navLinks[i]['name'] + "</a></li>" );
break;
case 3:
t2LinkArray.push( "<li class=\"" + navLinks[i]['style'] + "\"><a href=\"#/" + navLinks[i]['page'] + "\">" + navLinks[i]['name'] + "</a></li>" );
t2ClassArray.push( navLinks[i]['style'] );
break;
}
}
// Create Navbar View
NavView = Backbone.View.extend({
// Define View template
template: _.template( $('#navbarTemplate').html() ),
initialize: function () {
this.render();
},
render: function () {
// Call the template and pass data object
this.$el.html( this.template({ t1LinkArray : t1LinkArray, t2LinkArray : t2LinkArray, t2ClassArray : t2ClassArray }) );
},
});
var nav = new NavView({ el:$('nav') });
これがIE7/8でのみクラッシュする理由については途方に暮れています。
編集::これが現在本文の下に埋め込まれているテンプレートです。
<div class="navbar navbar-fixed-top" style="clear: both;">
<div class="navbar-inner">
<div id="navbar" class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<p class="navbar-text pull-right"><a class="brand" href="/workflow3"><em>Brand</em></a></p>
<div class="nav-collapse pull-left">
<ul class="nav">
<!-- List Tier 1 pages -->
{{ t1LinkArray.join("\n") }}
<!-- Style dropdown with each child's page class -->
<li class="dropdown {{ t2ClassArray.join(" ") }}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- List Tier 2 pages -->
{{ t2LinkArray.join("\n") }}
</ul>
</li>
</ul>
</div> <!-- /.nav-collapse -->
</div> <!-- /.container-fluid -->
</div> <!-- /.navbar-inner -->
</div> <!-- /.navbar -->