我遇到了一个问题，看起来Ember（1.6.0-beta.4）试图再次加载相同的视图，而不是转换到不同的视图。
该应用程序具有登录视图，然后是主页面视图。登录视图加载很棒。没问题。用户输入他们的信用点并点击登录。当成功响应返回时，应用程序将转换到主页面（路径将按原样更新）。
但它不是渲染主页面，而是将登录页面和主页面堆叠在一起。在控制台中，出现错误：“未捕获错误：断言失败：尝试注册已使用ID的视图：userName”
唯一具有id为'userName'的元素的视图是登录视图，这使我相信它正在尝试再次呈现登录页面（这不是我想要的）。
灰烬检查员没有显示任何不合适的地方。当我刷新主页时，错误就消失了。
以下是我的应用程序的相关部分（从一系列js文件复制和粘贴，我尽力保持组织尽可能的组织）
我的模板：
<script type="text/x-handlebars">
{{#if loggedIn}}
<nav>
<img id="navLogo" src="images/ExsellsiorMAnagerLogo.png" />
<!--<div class="pull-right">Hello {{FirstName}}!</div>-->
</nav>
{{outlet}}
{{else}}
{{outlet}}
{{/if}}
</script>
<script type="text/x-handlebars" id="manifests">
<div class="container-fluid">
<div class="row">
{{render 'filter' model}}
<div id="library" class="col-md-3 left-column"><h2>Library</h2></div>
<div id="stage" class="col-md-7 bg-danger"><h2>Stage</h2></div>
</div>
</div>
</script>
<script type="text/x-handlebars" id="login">
<div class="container">
<form id="login-form" role="form" class="form-horizontal" {{action login on="submit"}}>
<div class="form-group">
<img src="images/ExsellsiorMAnagerLogo.png" alt="Exsellsior Manager Logo" />
</div>
<div class="form-group">
<label for="userName" class="control-label hidden">User Name</label>
{{input id="userName" type="text" class="form-control" placeholder="User Name" value=userName }}
</div>
<div class="form-group">
<label for="pwd" class="control-label hidden">Password</label>
{{input id="pwd" type="password" class="form-control" placeholder="Password" value=password}}
</div>
<div class="form-group">
{{#if inProcess}}
<button id="loginBtn" class="btn btn-primary has-spinner spinner-active" type="submit">
Login<span class="spinner"><i class="icon-primary-spinner"></i></span>
</button>
{{else}}
<button id="loginBtn" class="btn btn-primary has-spinner" type="submit">
Login<span class="spinner"><i class="icon-primary-spinner"></i></span>
</button>
{{/if}}
</div>
{{#if invalidLogin}}
<div id="failure-message" class="form-group has-error bg-danger">
<span class="text-danger">Invalid username or password</span>
</div>
{{/if}}
</form>
</div>
</script>
控制器：
app.ApplicationController = Em.Controller.extend({
needs: ['login'],
loggedIn: false,
tokenChanged: function() {
var self = this,
login = self.get('controllers.login');
if (login.get('token')) {
this.set('loggedIn', true)
} else {
this.set('loggedIn', false)
}
},
userInfoChanged: function () {
var self = this,
login = self.get('controllers.login');
if (login.get('userInfo')) {
this.setProperties(login.get('userInfo'));
}
},
setState: function () {
var self = this;
var login = self.get('controllers.login');
login.addObserver('token', self, self.tokenChanged);
login.addObserver('userInfo', self, self.userInfoChanged);
if (login.get('token')) {
this.set('loggedIn', true);
this.setProperties(login.get('userInfo'));
this.transitionToRoute('manifests');
} else {
this.set('loggedIn', false);
this.transitionToRoute('login');
}
}
});
app.LoginController = Em.Controller.extend({
// resets login info so previous info is not stored
reset: function () {
var self = this;
self.setProperties({
userName: "",
password: "",
invalidLogin: false
});
},
// define dependency on application controller
//needs: ['application'],
// initializes with user token, if one exists
token: localStorage.getItem("token"),
userInfo: JSON.parse(localStorage.getItem("userInfo")),
// monitors if token changes and updates local storage if so
tokenChanged: function() {
localStorage.setItem("token", this.get('token'));
}.observes('token'),
userInfoChanged: function () {
localStorage.setItem("userInfo", JSON.stringify(this.get('userInfo')))
}.observes('userInfo'),
actions: {
// action to fire when user attempts to log in
login: function () {
var self = this;
if (self.get('inProcess')) {
return;
}
self.set('inProcess', true);
// function.bind() specifies the context the function will be executed in
// (the 'this' object within the function)
// login returns the promise from an AJAX call
return app.util.login(self.get('userName'), self.get('password'))
.then(loginSuccess.bind(self), loginFailure.bind(self));
}
}
});
app.FilterController = Em.ObjectController.extend({
showing: true,
actions: {
collapse: function () {
this.set('showing', !this.get('showing'));
}
}
});
路线：
app.Router.map(function () {
// /login
this.resource('login');
// /manifests
this.resource('manifests',function(){
this.resource('filter');
});
});
app.AuthenticatedRoute = Em.Route.extend({
// checks if we have a token - if not we can assume we're
// not logged in before we make an ajax call
beforeModel: function(transition) {
if (!this.controllerFor('login').get('token')) {
this.redirectToLogin(transition);
}
},
// function to handle re-routing to login screen
redirectToLogin: function(transition) {
var loginController = this.controllerFor('login');
loginController.set('attemptedTransition', transition);
this.transitionTo('login');
},
// reusable function for data requests
executeAjax: function(method, url, data) {
var token = this.controllerFor('login').get('token');
return app.util.executeAjax(method, url, token, data);
},
actions: {
error: function(reason, transition) {
if (reason.status === 401) {
this.redirectToLogin(transition);
} else {
// todo: handle this better
alert('Something went wrong');
}
}
}
});
app.LoginRoute = Em.Route.extend({
// ensures user data is cleared when login page loads/reloads
setupController: function(controller, context) {
controller.reset();
}
});
app.ManifestsRoute = app.AuthenticatedRoute.extend({
model: function () {
return this.executeAjax("GET", "states").then(function (result) {
return {
states: result
}
});
}
});
答案 0 :(得分：1)
评论不能在像这样的把手中使用，
<!--<div class="pull-right">Hello {{FirstName}}!</div>-->
它们应该用把手包裹起来：
{{!-- foo --}}
此外，您的出口应超出if声明的范围：
{{#if loggedIn}}
<nav>
<img id="navLogo" src="images/ExsellsiorMAnagerLogo.png" />
{{!-- <div class="pull-right">Hello {{FirstName}}!</div> --}}
</nav>
{{/if}}
{{outlet}}