次のプロジェクトで Ember.js の使い方を学びたいです。これまでのところ、こちらのドキュメントを読みましたが、Router に関する説明はありませんでした。次に、こちらのガイドを読みましたが、Router の適切な使用方法がまだわかりません。このようにルーターを使用してみました.2つのルートが必要です:
/login
2番目のルートに入るボタンを表示します/home
最初のルートに入るボタンを表示する
これは、「ページ」を切り替えるために Router を使用してテストする非常に単純なコードです。このコードを使用してみましたが、空白のページしか表示されません。
<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
何も表示されません。上記のコードを機能させる方法を教えてくれる人はいますか? 空白のページが表示されるのはなぜですか?