{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 兄弟一词,经得起流年. 的问题《Getting Start with Ember.js Router》','https://www.manongdao.com/q-660342.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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:
/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>
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?
Your code: http://jsfiddle.net/jPn3H/
...updated with a brand new 'application' template hooked up to
App.ApplicationView: http://jsfiddle.net/pauldechov/jPn3H/1/The
.initialize()function appendsApp.ApplicationViewto<body>for you. Those.connectOutlet(...)calls won't do much of anything unless there's an{{outlet}}to connect. Hope that helps.