Ember.js Nested folder like route (contain slash)

Question

I'm building an app with file manager like functionality with Ember.js. I'd like the URL for nested folder in the form of ".../#/files/Nested/Inside/" and it works fine with linkTo; however if I refresh (or go to the URL directly) I have the error message "No route match the URL '/files/Nested/Inside'". Is there any way to make Ember.js works in situation like this? Thanks.

Here is my current route setup:

FM.Router.map(function() {
  this.resource('folders', { path: '/files' })
  this.resource('folder', { path: '/files/:path' })
})

FM.FoldersRoute = EM.Route.extend({
  model: function() {
    return FM.Folder.find('/')
  }
})

FM.FolderRoute = EM.Route.extend({
  model: function(params) {
    return ns.Folder.find(params.path)
  },
  serialize: function(folder) {
    return { path: folder.get('path') }
  }
})

score 6 · Accepted Answer · answered Jun 11 '13 at 20:21

Wow, interesting question. It should be possible but I've not tried it myself or seen any examples of this in the wild.

Under the hood, ember uses the tildeio router and route-recognizer to resolve routes. The route's readme explains how to define more elaborate routes like:

router.map(function(match) {
  // this will match anything, followed by a slash,
  // followed by a dynamic segment (one or more non-
  // slash characters)
  match("/*page/:location").to("showPage");
});

So to get nested folders working, you might be able to do something like this:

FM.Router.map(function() {
  this.resource('folders', { path: '/files' })
  this.resource('folder', { path: '/files/*path' })
})

Hope this helps.

Ember.js Nested folder like route (contain slash)

1 Answers1

Linked