ember.js difference routes folder and router.js file

Question

I'm trying to make a project in rails and ember.js through the ember-rails gem. I made a rails generate ember:bootstrap and I'm observing the tree it created under assets/javascripts.

I can't understand what is the difference between things I have to put inside the routes.js file at top level, and in files inside the /routes folder.

Answer 1

In the routes.js file at the the top, you will define your routes and resources eg:

You can use this rails app as guide. The code I use in this answer came from that repo.

EmBlog.Router.map(function() {
  this.resource("posts", {path: '/posts'}, function(){
    this.route('new');
    this.route('show', {path: '/:post_id'}) ;
    this.route('edit', {path: '/:post_id/edit'});

 });
});

If you want to customize any of those routes or resources, then you create a new file in /routes folder. For example if we want to customize the show route by defining an event to delete a post in that router and to also customize what data is returned using the model hook, then we would need to create a file in / routes / posts / show_route.js and add our code there:

EmBlog.PostsShowRoute = Ember.Route.extend({

 model: function(params) {
  return EmBlog.Post.find(params.post_id);
 },

 setupController: function(controller, model){
  controller.set('content', model);
 },

 events: {
  destroyPost: function(post) {
   post.deleteRecord();
   post.get('store').commit();
   this.transitionTo('posts');
  }
 }

});

The idea of splitting the route is to ensure it doesn't get too big or filled with 100's of lines of code. If you prefer defining both the top level routes and their customization in thesame file. You can. Here is another rails app that does just that.