Ember.js routing: how do you set a default route to render immediately?
It seems this is done diffently now. I had success with this way of doing it:
App = Ember.Application.create();
App.Router.map(function() {
// 'index' route is default
this.resource('dashboard');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
// this redirects / to /dashboard
this.transitionTo('dashboard');
}
});
App.DashboardRoute = Ember.Route.extend({
});
With Ember CLI, you can put the redirect in index.js in your root of routes directory:
import Ember from 'ember';
export default Ember.Route.extend( {
redirect: function() {
this.transitionTo('dashboard');
}
});
You can make a redirect from the index to the home route:
// Default route
$(function() {
App = Em.Application.create();
// Instantiated and wired up for you in App.initialize()
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
templateName: 'application'
});
App.NavController = Em.Controller.extend({});
App.NavView = Em.View.extend({ templateName: 'nav' });
App.HomeController = Em.Controller.extend({});
App.HomeView = Em.View.extend({ templateName: 'home' });
App.ProfileController = Em.Controller.extend({});
App.ProfileView = Em.View.extend({ templateName: 'profile' });
App.Router = Em.Router.extend({
enableLogging: true,
location: 'hash',
root: Em.Route.extend({
goHome: Ember.State.transitionTo('home'),
goProfile: Ember.State.transitionTo('profile'),
index: Em.Route.extend({
route: '/',
redirectsTo: 'home'
}),
home: Em.Route.extend({
route: '/home',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet({
name: 'home'
});
}
}),
profile: Em.Route.extend({
route: '/profile',
connectOutlets: function(router, context) {
console.log("enter");
router.get('applicationController').connectOutlet({
name: 'profile'
});
}
})
})
});
App.initialize();
});<script type="text/x-handlebars" data-template-name="application">
{{view App.NavView controllerBinding="controller.controllers.navController"}}
<hr />
<div class="content">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="nav">
<h1>navigation:</h1>
<button {{action goHome}}>home</button>
<button {{action goProfile}}>profile</buton>
</script>
<script type="text/x-handlebars" data-template-name="home">
<h1>Home...</h1>
</script>
<script type="text/x-handlebars" data-template-name="profile">
<h1>Profile...</h1>
</script>