爲什麼我在我的Ember.js代碼中獲得DOM Exception 8？

App = Em.Application.create({ 
    LOG_TRANSITIONS: true 
}); 
App.Router.map(function() { 
    this.resource('login'); 
    this.resource('posts'); 
    this.resource('index'); 

}); 
App.PostsRoute = Ember.Route.extend({ 

}); 

App.LoginController = Ember.Controller.extend({ 

    reset: function(){ 
     this.setProperties({ 
      username : "", 
      password : "" 
     }); 
    }, 

    loggedIn: localStorage.loggedIn, 

    loggedInChanged: function(){ 
     localStorage.loggedIn = this.get('loggedIn'); 
    }.observes('loggedIn'), 

    login : function(){ 
     var self = this, data = this.getProperties('username', 'password'); 
     console.log(data); 
     console.log(JSON.stringify({"args" : data })); 

     $.ajax({ 
      type: "POST", 
      url : "/auth/login", 
      data: JSON.stringify({"args" : data }), 
      complete: function(data, textStatus, jqXHR){ 
       if(data.status != 200){ 
        $('#alert').fadeIn(); 
        setTimeout(function(){ 
         $('#alert').fadeOut(); 
        }, 5000); 
       } 
       else{ 
        self.set('loggedIn',true); 
        var attemptedTransition = self.get('attemptedTransition'); 
        if(attemptedTransition){ 
         attemptedTransition.retry(); 
         self.set('attemptedTransition',null); 
        } 
        else{ 

         self.transitionToRoute('posts'); 
        } 
        console.log("yay!"); 
       } 
      }, 
      dataType: "application/json", 
      contentType : "application/json" 
     }); 
    } 
});

///////// HTML ////爲什麼我在我的Ember.js代碼中獲得DOM Exception 8？

<!DOCTYPE html> 
<html class="login"> 
<head> 
<meta charset="utf-8"> 
<title>App</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> 
--><link rel="stylesheet" href="css/normalize.css"> 
<link href="css/bootstrap_cosmo.css" rel="stylesheet" media="screen"> 
<link rel="stylesheet" href="css/font-awesome.min.css"> 
<link rel="stylesheet" type="text/css" 
    href="css/bootstrap-tagmanager.css"> 
<link rel="stylesheet" type="text/css" 
    href="css/typeahead.js-bootstrap.css"> 

<link rel="stylesheet" type="text/css" href="css/style.css"> 
<script src="js/libs/jquery-1.9.1.js"></script> 
<script src="js/libs/json2.js"></script> 

<script src="js/libs/handlebars-1.0.0-rc.4.js"></script> 
<script src="js/libs/jquery.color-2.1.2.min.js"></script> 

<script src="js/libs/bootstrap.js"></script> 
<script src="js/libs/bootstrap-tagmanager.js"></script> 


<script src="js/libs/ember-1.0.0-rc.6.1.js"></script> 
<script src="js/libs/Router.js"></script> 

<script src="js/app.js"></script> 

</head> 

<body> 




<script type="text/x-handlebars"> 
{{outlet}} 
</script> 
<script type="text/x-handlebars" data-template-name="login"> 
    <div class="login"> 
    <div id="curves" > 
    <canvas id="canvas" width="1500" height="1500"/> 
    </div> 
    <div class="navbar"> 
      <div class="navbar-inner "> 
       <a class="brand " href="#"><img class="logo" 
        src="/static/images/logo.png"></a> 
      </div> 
    </div> 
    {{#linkTo 'posts'}}<button>Test</button>{{/linkTo}} 
    <div class="container-fluid login"> 
      <div class="row"> 
       <div class="span3" id="leftCol"> 
        <form id="login-form" class="login-form" {{action login on="submit"}}> 
        <label class="control-label" for="inputUsername">Username</label> 

         {{input id="inputUsername" value=username type="text" placeholder="Username" class="form-control"}} 
         <label class="control-label" for="inputPassword">Password</label> 

         {{input value=password type="password" placeholder="Password" class="form-control"}} 
         <div class="checkbox"> 
         <label> 
          {{input type="checkbox"}} Remember Me 

         </label> 
         </div> 
         {{input class="btn btn-primary" type="submit" value="Sign in"}} 
        </form> 
        <h3>Or</h3> 
        <div class="tm-tag tm-tag-success"> 
        <button type="submit" class="btn btn-primary" onClick="parent.location='register.html'">Register!</button> 
        </div> 
      </div> 
      <div class="span9"> 
       <div id="alert" class="alert hidden"> 
        <button type="button" class="close" data-dismiss="alert">&times;</button> 
        <h4>Incorrect Login info.</h4> 
       </div> 
      <div class="info-box tm-tag"> 

      </div> 
      </div> 

     </div> 
     </div> 
    </div> 
    <script src="js/login.js"></script> 
</script> 
<script type="text/x-handlebars" data-template-name="posts"> 
<h2>test</h2> 
</script>

我的轉換是給我DOM例外。無論是顯式調用transitionTo還是使用linkTo調用。我無法找到任何代碼錯誤。一切都編譯完成，直到我點擊按鈕或提交表單（成功），我纔得到javascript錯誤。

來源

2013-08-03 carboncomputed