embedded route seems to mount twice

[stukennedy]

If I have an app, which uses nested routes, that looks like:

<app>
  <route></route>
</app>

<component1>
  <route></route>
</component1>

<component2>
</component2>

If we have a route that loads component1 into the app and component2 into component1, then component2 seems to get mounted (and updated) twice, but doesn't unmount in-between.

This is a problem for me because I have DOM code in there that should only get executed once and gets removed on unmount.

[gabrielmoreira]

Hi @continuata , can you try again using this:

riot.router.config.updatable = true;
riot.router.start();

[stukennedy]

perfect!! Thanks so much ... is that documented anywhere as necessary for nested routes?

[gabrielmoreira]

Unfortunately I am still very slow to write in English, and end up wasting a lot of time. This is the reason I have not yet created a documentation.

I think there is a bug on nesting remounting every time, but not yet analyzed calmly to understand this problem is really a bug, or an inevitable behavior.

When you use riot.router.config.updatable=true, the currently mounted tags are updated using this.update(api) instead of reinserted every time. I think this should be the default behavior in the next version.

The biggest difference of the current behavior using updatable, is when you need to get the url parameters or custom api properties on route. When you use new Route ({..., path: '/:myParameter', api: {myProp: 1}}) for the parameters you just get using opts.myParameter and opts.myProp in your tag script. However, if you use updatable: true on your route config, or as a global config like riot.router.config.updatable=true, you will need to listen your tag updates this.on ('update', function () {...});to get the new parameters, rather than your tag being remounted every time.

[gabrielmoreira]

23