开始使用Ember.js路由器
[英]Getting Start with Ember.js Router
问题描述
I want to learn using Ember.js for my next project. 
我想学习使用Ember.js进行下一个项目。 So far I have read the documentation here but I saw no explanation about Router. 到目前为止，我已阅读此处的文档，但我没有看到有关路由器的解释。 Then I read the guide here but I still don't understand how to use Router properly. 然后我在这里阅读了指南，但我仍然不明白如何正确使用路由器。 I tried using Router this way, I want 2 route: 我试过这种方式使用Router，我想要2路：
-
/loginwhich displays a button to enter the second route/login，显示用于输入第二条路线的按钮 -
/homewhich displays a button to enter the first route/home显示进入第一条路线的按钮
This is just a very simple code to test using Router to switch between "pages". 这只是一个非常简单的代码，用于测试使用Router在“页面”之间切换。 I tried using this code but all I get is a blank page: 我尝试使用此代码，但我得到的只是一个空白页：
<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>
When I run this, the URL goes to #/login but it display nothing. 当我运行它时，URL转到#/login但它什么也没显示。 Does anyone can show me how to make the above code works? 有谁能告诉我如何使上述代码有效？ Why do I get a blank page? 为什么我会得到一个空白页面？
1 个解决方案
解决方案1
4 已采纳 2012-08-06 11:20:54
Your code: http://jsfiddle.net/jPn3H/ 您的代码： http ： //jsfiddle.net/jPn3H/
...updated with a brand new 'application' template hooked up to App.ApplicationView : http://jsfiddle.net/pauldechov/jPn3H/1/ ...使用连接到App.ApplicationView全新“应用程序”模板进行App.ApplicationView ： http ： //jsfiddle.net/pauldechov/jPn3H/1/
The .initialize() function appends App.ApplicationView to <body> for you. .initialize()函数将App.ApplicationView附加到<body> 。 Those .connectOutlet(...) calls won't do much of anything unless there's an {{outlet}} to connect. 除非有{{outlet}}连接，否则那些.connectOutlet(...)调用不会做任何事情。 Hope that helps. 希望有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.