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////
<!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">×</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 错误。