Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Make DerbyJS only re-render certain DOM nodes

Make DerbyJS only re-render certain DOM nodes


The way DerbyJS ( seems to work at the moment is that it replaces everything in the Body tag of the document whenever you click a link.

Is there anyway to say use the template, but replace the content inside #main-content with that instead of the whole body?

Navigation on the left is fixed and doesn't need the benefits of realtime interaction.

Why this is an issue is needing to run some Javascript on the page load to set the size of some containers based on the size of a users browser window, and once I click a link, this setup gets wiped and recreated, and of course, the Javascript doesn't run again, because the document itself hasn't refreshed, just the body.

This would also allow me to write nicer Jquery Bindings for the most part, $('element').click(, rather than $('html').on('click','element', ...

Any thoughts, or is this a step too far for this framework at this point in time?

P.S. As I'm only just getting started with Derby, and realtime frameworks in general, maybe what I'm trying to do isn't best practice anyway? I chose Derby because I like the UX part of initial render on the server, then the rest in the client, but sharing routers, which reduces the duplication of code. Open to any better ways of achieving this.

Problem courtesy of: aleayr


There is no way to rerender part of body on page reload. Just whole body.

You can use app.enter hook to run js code after every page render.

No need to use jQuery bindings, use Derby bindings

Solution courtesy of: Vladimir Makhaev


View additional discussion.

This post first appeared on Node.js Recipes, please read the originial post: here

Share the post

Make DerbyJS only re-render certain DOM nodes


Subscribe to Node.js Recipes

Get updates delivered right to your inbox!

Thank you for your subscription