Equivalent of Ember.js yield in Sails.js w/Handlebars (SPA style)

Question

So basically I want to do something that I can do in ember with handlebars but without using ember just sails.js and handlebars.

I set up sails project like so: sails new fooProject --template=handlebars after running npm install sails-generate-views-handlebars.

Great I have a layout file, all my files end in .handlebars woot.

But I would like to do something like this:

Views:

views/index.handlebars

{{>header}}
    {{yield}}
{{>footer}}

/views/partials/foo.handlebars

<div class="foo stuff">...</div>

Router:

config/routes.js

'/': {
    view: 'index',
    controller: 'FooController',
    action: 'index'
}

Controller:

controllers/FooController

index: function(req, res){
    return res.view({partials: 'partials/foo'}); // <-- I want foo partial in the yield.
}

So that I end up with this output:

<header>...</header>
    <div class="foo stuff">
<footer>...</footer>

Anytime my user navigates I'd like to render the new partial into that {{yield}} block without reloading the page. But that doesn't work, (I've tried). So how would I accomplish this?

To help clarify what I'm going for is a Single Page Application feel without having to use a front-end framework as well.

Answer 1

It can't be done without front end framework (or use basic XHR/ AJAX vanilla JS if you want to). Since Sails is server side engine and rendering views in server side, which means the page must be reload.

You can use any front end framework, and get any partial views from Sails's views as well if you want to hybrid front end (partial load) and back end (Sails) view engine.