I was thinking of much simpler solution.
The problem now is the jQuery Mobile page paradigm.
Even on multipage layout each <div data-role="page"> defines it's own
footer and header.
When using ember.js (or any other ) you would replace the content of such page in a controller dynamicly.
by using $("div#page_one").html( <rendered content> ).
You could even add an other <div data-role="page"> dynamicly and then initiate a transition
with $.mobile.changePage("#page_two").
But if you have a fixed footer and header on each page, and for example use a "slide from left" transition, you will see your footers sliding in, which is not consistent to the behaviour of mobile apps. For them you want your header, footer and maybe side menu stay fixed and only the content sliding in.
JQuery mobile has really nice UI capabilities and what i mean by "playing nicely" with js frameworks, is allowing to use it also as view layer only. You don't have to take care of these framework implementation internals, but just only allow another layouting paradigm.
<div data-role="book" >
<div data-role="panel"> .. </div>
<div data-role="header> .. </div>
<div data-role="page"> .. </div>
<div data-role="page"> .. </div>
<div data-role="footer"> .. </div>
</div
Allowing only one header and footer would be a great starting point.
What I also can think of is a html replace function which is applying a css transition on any DOM object.
$("#content").mobile.html(new_htlm, {transition: "slide"}). But this will be indeed not that easy.