Recommended way for implementing left hand nav + routing + dynamic content

[Tamas Ridly]

Hi All,

I'm new to the group and might not describe my question properly, feel free to correct me.

RactiveJS is my favourite library for writing single page apps, I have created a few smaller projects already.

The one I am currently working on is similar to a dashboard application.

It has an always visible left hand navigation menu and the majority of the screen changes depending on the selected menu.

I'm using routing as well so the user can bookmark the location and come back later.

The question is how to implement this layout properly?

If I create a ractive component for the menu and another component for the dynamic content, then every time the menu is clicked not only the dynamic content but also the menu is re-created.

Something like:

<app>

  <menu>...</menu>

  <dynamicContent>...</dynamicContent>

</app>

So when I click a menu item in the menu component the router activates the corresponding component which has again the menu and the new content in the template.

As a result the menu get re-created every time the user click on a menu.

I was thinking to put the menu outside of ractive but somehow it doesn't feel right.

What do you guys recommend as a proper solution?

Thanks

Tamas

[Chris Reeves]

This is actually one of the scenarios that 0.9 (edge, unreleased) is trying to address with anchors that can embed external instances. It's an underdocumented feature at the moment, but basically, you create your overarching instance with two anchors

<div id="root">

  <div id="left-nav"><#leftNav /></div>

  <div id="content"><#content /></div>

</div>

Of course, the menu doesn't have any need to be an anchor, as you probably won't be swapping it out entirely as you would the content. If the content component comes with a chunk of menu, you could add a submenu anchor in the menu component and have the content component populate it as part of its lifecycle. If a route is a sub-route, you can push the new content onto the anchor list, and it will displace its parent until you detach it, which will put the parent back:

ractive.attachChild(main, { target: 'content' });

// routing to a sub-component of main

ractive.attachChild(sub, { target: 'content', prepend: true });

// done with sub route, going back to main

ractive.detachChild(sub);

If you can't reasonably use edge, you can get a similar setup with dynamic partials in 0.8, where instead of replacing the menu entirely on routing, you just change the dynamic content and update the relevant submenu partial.

Thanks, Chris

--
You received this message because you are subscribed to the Google Groups "Ractive.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tamas Ridly]

Hi Chris,

thank you for the quick response. I think this is exactly I am looking for.

Do you happen to have a small example app somewhere to demo the whole solution?

Is there a release date for edge?

Thanks

Tamas

[Tamas Ridly]

I found an example which I have updated a bit:

https://jsfiddle.net/ridly/yLyy0xvz/

There is also a pretty good test coverage for this feature here:

https://github.com/ractivejs/ractive/blob/dev/test/browser-tests/methods/attachChild.js

I'm looking forward to see it in the next release and in the docs too.

Tamas

[Chris Reeves]

There's not really a release date set, but there're only a few things on the list to do before 0.9 moves into beta. One of those things happens to be updating the docs :)

Also on the list of things to do is to tie this up with a router, like page.js, into a good working example SPA.

Thanks, Chris