backbone.js IE8 appendChild() error

Question

Типичный «работает в истории Chrome/FF, но не в IE». Тем не менее, IE9 отлично справляется с этим.

Единственное, что появляется в консоли IE является:
SCRIPT65535: Неожиданный вызов метода или доступа к свойству.
jquery.min.js, строка 3 символов 32461

screenshot Вот в IE Profiler трассировки ошибки.

А вот код из моего 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') }); 

В недоумении, почему это происходит сбой только в IE 7/8.

EDIT :: Вот шаблон, который в настоящее время встроен под корпус.

 <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 --> 

Answer 1

В конечном счете, я до сих пор не нашел решение настоящей проблемы. Технически это даже не считается работой, но создает рабочие условия!

http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

Очевидное преимущество, больше не должны потворствовать идиосинкразии IE.

Ненавижу, не зная, что вызывает это, поэтому, если кто-либо еще, пожалуйста, не стесняйтесь отвечать.

Answer 2

Старый вопрос, но я получал эту ошибку сегодня, и это был лучший результат, поэтому я все же думаю.

Вы использовали атрибуты данных html5 в своей разметке - предположительно, ваш документ был html5? Если вы использовали любой из новых тегов, не поддерживаемых IE8 (без добавления какого-либо описания какого-либо описания), jQuery создает эту ошибку. Попробуйте это в начале своей страницы.

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 

Помимо этого он, по-видимому, имеет тенденцию появляться в искаженном html - например. если вы забыли закрыть тег или пропустить закрытие цитаты в атрибуте.

Answer 3

Я только что помог коллеге устранить эту проблему в IE8 сегодня. Мы обнаружили, что он пытался добавить элемент, который не может иметь детей (в его случае, тег IMG).

Я заметил, что селектор JQuery на new NavView({ el:$('nav') }); должен быть .nav Там нет nav тегов (по крайней мере, в вашем примере кода), и поэтому он пытается добавить узлы к несуществующему элементу.