我想在下一个项目中学习使用 Ember.js。到目前为止，我已经阅读了这里的文档，但我没有看到关于路由器的解释。然后我在这里阅读了指南，但我仍然不明白如何正确使用路由器。我尝试以这种方式使用路由器，我想要 2 条路线：
/login显示进入第二条路线的按钮/home显示一个按钮进入第一条路线
这只是一个非常简单的代码，用于测试使用路由器在“页面”之间切换。我尝试使用此代码，但我得到的只是一个空白页：
<script src="js/libs/jquery-1.7.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.min.js"></script>
<script>
var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend();
App.LoginView = Ember.View.extend({
templateName: 'login-page'
});
App.HomeView = Ember.View.extend({
templateName: 'home-page'
});
App.router = Ember.Router.create({
enableLogging: true,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
redirectsTo: 'login'
}),
login: Ember.Route.extend({
route: '/login',
doLogin: Ember.Route.transitionTo('home'),
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('login');
}
}),
home: Ember.Route.extend({
route: '/home',
doLogout: Ember.Route.transitionTo('login'),
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('home');
}
})
})
});
App.initialize(App.router);
</script>
<script type="text/x-handlebars" data-template-name="login-page">
<h1>Login Page</h1>
<button {{action doLogin}}>Login</button>
</script>
<script type="text/x-handlebars" data-template-name="home-page">
<h1>Home Page</h1>
<button {{action doLogout}}>Logout</button>
</script>
当我运行它时，URL 会转到#/login但它什么也不显示。有谁可以告诉我如何使上面的代码工作？为什么我得到一个空白页？