How to handle multiple views for a single page web app

So I am building a simple node.js web application. But I'm a little stuck on how the single web app is supposed to work. I'm not using backboneMVC at fornt end for now. The concept is that I have two tabs on the page, namely Folders and Lists. So I want to be able to show the content of Folder through a restful URL such as host/folder/{folder-id}, and do the same for Lists.

It seems fine if I just res.render the View template with parameters in response to Restful requests.

But I'm confused when these two are on the same page and have to be accessible through tab clicks without leaving the homepage. I may be able to get it work by using front-end routing with # tags (so you end up with host/index.html#/folder/{id})

So I wonder, is there an easier way with partial templates that I can just switch in and out a part of the homepage through jade template partials without ever leaving index.html?

You might want to check out Page.js for loading templates in single page apps, (http://github.com/visionmedia/page.js) it's also from Visionmedia, the same people that made Jade.

I found it easier to understand than backbone for smallar scale apps/sites.

I haven't tried to directly render partials before, but if I understand your question can you do something like this?

Create views to generate the partial output. Use routes to give you endpoints to grab them from. From your site trigger some javascript to replace -say- a block with the output from that endpoint.

Could look something like this: in routes.js:

app.get('/folder/:id', folders.show)

in controllers/folders.js:

exports.create = function (req,res){
  res.render('folders/partial')
}

in folders/show.jade:

button#tab1
.tab
  .result

Then some simple jquery to replace whats on your site with the content form the partial:

$('#tab1').click(function() {
  $.get('/folder/:id', function(data) {
    $('.result').html(data);
  })
})

You might look at asset-rack. It helps push static content to the browser.

It can precompile jade templates into javascript functions that you can then render on the client. The syntax is pretty simple:

new JadeAsset({
  url: '/templates.js',
  dirname: './templates'
});

So if your template directory looked like this:

index.jade
contact.jade
user/
    profile.jade
    info.jade

Then reference your templates on the client like this:

$('body').append(Templates['index']());
$('body').append(Templates['user/profile']({username: 'brad', status: 'fun'}));
$('body').append(Templates['user/info']());

Here's a link:

http://asset-rack.org