In emberjs routes, I have
App.Router.map(function() {
this.resource('about');
this.resource('projects');
});
about page shows up when I hit /about and projects page shows up when I hit /projects.
How do you make the about page show up even in / as well as /about?
Rails equivalent of would be something like
root to: "pages#about"
get 'about', to: 'pages#about'
get 'projects', to: 'pages#projects'
By default ember generates a IndexRoute mapping to '/'
App.Router.map(function() {
// By default ember generates a IndexRoute mapping to '/'
// this.route('index', { path: '/' });
this.resource('about');
this.resource('projects');
});
App.IndexRoute = Ember.Route.extend({
beforeModel: function() {
this.transitionTo('about');
}
});
So you can override the beforeModel from IndexRoute to transition to about route.
Related
Router.map(function() {
this.route('login', {path: '/'});
this.route('signup');
this.route('forgot-password');
this.route('main');
});
I have the follow problem, when I use '/login' y I try manually to put /main this won't will redirect to me to '/login'
I wanna control the access because a I can navigate on all my templates if I write it into the search box
From the guides:
If you want to redirect from one route to another, you can do the transition in the beforeModel hook of your route handler.
http://guides.emberjs.com/v1.11.0/routing/redirection/#toc_before-the-model-is-known
In your case, if you want to automatically make visiting / redirect to /login:
// app/router.js
Router.map(function() {
this.route('login');
});
// app/routes/index.js
export default Ember.Route.extend({
beforeModel: function() {
this.transitionTo('login');
}
});
I have generated a route 'home' and I would like to change my base url '/' to be 'home' i have tried adding this line of code to the router.js
App.Router.reopen({
rootURL: '/blog/'
});
I have also tried setting my base-url in config/environment.js to '/home/'
// app/routes/application.js
export default Ember.Route.extend({
redirect: function () {
this.transitionTo('home');
}
});
// router.js
Router.map(function() {
this.route('home', { path: '/home' });
});
I'm having an issue making a nested route available in Ember.js
App.Router.map(function() {
this.resource('home', { path: '/' });
this.resource('form', { path: '/forms/:form_id' }, function() {
this.route('newRecord');
});
I have the parent route...
App.FormRoute = Ember.Route.extend({....
Which is working.
Next I have...
App.FormNewRecordRoute = Ember.Route.extend({
afterModel: function() {
this.set('newRecord', this.modelFor('form');
}
});
Normally I get the URL with something like localhost/forms/9087
With the child route I'm getting localhost/undefined/newRecord
I'm guessing that 'localhost/undefined/newRecord' is coming from something like {{#link-to 'newRecord'}}. It should probably be {{#link-to 'form.newRecord'}}.
I'm trying to start to build a admin system that will run on a /admin/ prefix.
Here is my routes file
App.Router.reopen
location: 'history'
rootURL: '/admin'
App.IndexRoute = Ember.Route.extend
setupController: (controller, model) ->
#controllerFor('application').set('currentRoute', 'home')
When I go to /admin I get the following error:
Uncaught Error: No route matched the URL '/admin'
I'm just starting with emberjs, and my code is based on this serie
Ember version: v1.0.0-pre.4
Ember-data current api revision:: 11
In old-router the 'rootURL' property would have been ignored when resolving routes. In the latest version of ember, rootURL only seems to be used when constructing links. Not sure if this is a bug or oversight. As a workaround, try this instead:
App.Router.map(function() {
this.resource("admin", { path: "/admin" }, function() {
this.route("other");
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('admin');
}
});
When talking about routing in emberjs, it depends which version you are using. There was a big API change between 1.0pre2 and 1.0pre3. The docu on www.emberjs.com is already up-to-date for the new API and and easy to understand.
Below a really small example that shows
IndexRoute that automatically redirects to the overview of all members at '/members'.
Dynamic routing based on an ID
Serialization/Deserialization in case that the parameter is not 'id' but something else. In the example below, it is 'refId' (stands for reference ID).
Well, the examle does not really show more than the official documentation. but add-on information is always nice.
So, hope this helps. cheers.
App.Router.map(function() {
this.resource("members", { path: '/members' });
this.resource("member", { path: "/members/:refId" }, function() {
this.route("delete");
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('members');
}
});
App.MembersRoute = Ember.Route.extend({
model: function() {
return App.Member.findAll();
}
});
App.MemberRoute = Ember.Route.extend({
model: function(params) {
return App.Member.find(params.refId);
},
// overwrite default serializer (defaults to 'id', member has 'refId')
serialize: function(model) {
return { refId: model.refId };
}
});
i'm getting error with ember 0.9.8.1
You cannot use the same root element (body) multiple times in an Ember.Application
any idea what this is happening? some suggestions on where i should look into?
thanks.
You cannot bind several Ember application to the same DOM element, as it will conflict for DOM maintenance.
You nevertheless can instanciate several Ember applications in the same page. Try something like that:
App1 = Ember.Application.create({
rootElement: '#app1'
});
App1.ApplicationController = Ember.Controller.extend();
App1.ApplicationView = Ember.View.extend({
templateName: 'app1-view'
})
App1.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
path: '/'
})
})
});
App2 = Ember.Application.create({
rootElement: '#app2'
});
App2.ApplicationController = Ember.Controller.extend();
App2.ApplicationView = Ember.View.extend({
templateName: 'app2-view'
})
App2.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
path: '/'
})
})
});
Here, we explicitly set the DOM element to which the app will bind, using rootElement property.
By default, an Ember app binds to body, so if you have twice, they conflict...
Example # http://jsfiddle.net/MikeAski/FMV8u/13/