Ember загрузка шаблона несколько раз и ошибка
У меня проблема с тем, что похоже, что Ember (1.6.0-beta.4) пытается загрузить одно и то же представление второй раз вместо перехода на другое представление.
Приложение имеет вид входа в систему, а затем просмотр главной страницы. Представление входа в систему загружается отлично. Там нет проблем. Пользователь вводит свои кредиты и нажимает логин. Когда возвращается успешный ответ, приложение переходит на главную страницу (маршрут обновляется, как и должно быть).
Но вместо того, чтобы отображать главную страницу, она отображает страницу входа и основную страницу, собранные вместе. В консоли есть ошибка: "Uncaught Error: Assertion Failed: Попытка зарегистрировать представление с уже используемым идентификатором: userName"
Единственное представление, которое имеет элемент с идентификатором "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
}
});
}
});
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}}