Question

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">&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错误。

Answer 1

我不确定把手模板中的登录脚本是否是犹太洁食。

Answer 2

我明白了。我在我的车把模板中加入了一个脚本标签。显然这是不允许的。

为什么我的Ember.js代码中会出现DOM异常8？

2 个答案: