Unable to generate url for abstract routes

[blikblum]

I generate links for the routes using router.generate method and after each transition, i add or remove a css class ("active") to the link according to the result of router.isActive.

Currently calling router.generate with a name of an abstract route will cause an error

Given the following route configuration:

  route('colors', {path: '/colors', abstract: true}, function () {
    route('colors.index', {path: '', routeClass: ColorsIndexRoute});
    route('colors.new', {path: 'new', routeClass: ColorsCreateRoute});  
  });

I need to create a link for the 'colors' route but since is not possible to generate URL for it, i create a link using the 'colors.index' route.

At first look it works because is the same URL but when i transition to 'colors.new' the link looses the "active" class because 'colors.index' is not active anymore. I need that this link continues with the "active" class while navigating in 'colors' children routes

Any other way to generate the URL for an abstract route or to accomplish the desired behavior?

Related to #151

[nathanboktae]

By design. You can't instantiate an abstract class in OOP, right? same thing.

You are overthinking it. Try:

  route('colors', {path: '/colors', routeClass: ColorsIndexRoute}, function () {
    route('colors.new', {path: 'new', routeClass: ColorsCreateRoute});  
  })

btw routeClass is probably a react-cherrytree thing, it's not core to cherrytree. But my solution still applies. We have a navigation bar in a knockout-based application, and it marks it active by looking for the colors named route in any of the routes in router.state.routes.

[blikblum]

By design. You can't instantiate an abstract class in OOP, right? same thing.

The abstract route is the only primitive provided by cherrytree to create a index route similar to what ember provides, as pointed in the docs, if there's another way i'll be glad use it

 route('colors', {path: '/colors', routeClass: ColorsIndexRoute}, function () {
    route('colors.new', {path: 'new', routeClass: ColorsCreateRoute});  
  })

It will not work because ColorsCreateRoute will become child of ColorsIndexRoute when its a sibling

The colors route has an outlet element (similar to Ember outlet or VueRouter router-view) where the children is rendered

something like

<div>
<h1>Colors<h1>
  <div class="outlet"></div> //-> here colors.index or colors.new or colors.show are rendered
</div>

Actual code: https://github.com/blikblum/marionette-wires-revisited/blob/master/src/main.js

[nathanboktae]

OK I see the use case - there is a common shell for each of the children, but you can't route to that shell you need to pick a sibling.

[KidkArolis]

Sorry I missed the issue when you originally posted!

Hm, interesting problem, I guess a ~dirty workaround is to just do something like router.isActive(route.replace('.index', '').replace('index', 'app')). Which is kind of semantically correct - if you wanted to know if 'books.index' is active, you'd do isActive('books.index'), but you want to know if 'books' is active, so you need to do isActive('books').

I'll look over your PR and the other issue now.