从Ember.js路由器开始 [英] Getting Start with Ember.js Router
问题描述
我想学习使用Ember.js作为我的下一个项目。到目前为止，我已经阅读了文档这里，但是我没有看到关于路由器的说明。然后我阅读了这里的指南，但我仍然不明白如何正确使用路由器。
我以这种方式尝试使用路由器，我想要2路由：
I want to learn using Ember.js for my next project. 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:
-
/ login显示一个按钮进入第二条路线 -
/ home其中显示一个按钮进入第一条路线
/loginwhich displays a button to enter the second route/homewhich displays a button to enter the first route
这只是一个非常简单的代码，用于使用路由器在页面之间切换。
我试过使用这个代码，但是我得到的只是一个空白页面：
This is just a very simple code to test using Router to switch between "pages". 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>
当我运行这个，URL到＃/ login 但它什么都不显示。
有没有人可以告诉我如何使上述代码工作？为什么我得到一个空白页？
When I run this, the URL goes to #/login but it display nothing.
Does anyone can show me how to make the above code works? Why do I get a blank page?
推荐答案
您的代码： http://jsfiddle.net/jPn3H/
...更新了一个全新的应用程序模板挂钩最多 App.ApplicationView ： http：// jsfiddle .net / pauldechov / jPn3H / 1 /
...updated with a brand new 'application' template hooked up to App.ApplicationView: http://jsfiddle.net/pauldechov/jPn3H/1/
.initialize（）函数附加 App.ApplicationView 到< body> 。那些 .connectOutlet（...）调用不会做任何事情，除非有一个 {{outlet}} 连接。希望有帮助。
The .initialize() function appends App.ApplicationView to <body> for you. Those .connectOutlet(...) calls won't do much of anything unless there's an {{outlet}} to connect. Hope that helps.
这篇关于从Ember.js路由器开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
