How to properly organize the application structure on the client so that it looks like m.vk.com?

Question

JavaScript

I am doing a Single Page Backbone.JS application for mobile phones. I want to do it like Vkontakte, so that when I "transition" to another page, load the template and data for it and render instead of the current one. Of course, I can simply generate html from the template and data and do jQuery.replaceWidth(), but I noticed that Vkontakte only replaces the page body, and in the header it simply changes the title and adds a "back" button to return to the previous page (and does it with the effect like on IOS).
The question is:
- How to properly organize the "transition" through the pages to achieve the same effect?
- How to generate a page layout so that only elements that actually change are replaced (for example, only the page title)

Answer 1

Backbone provides the most minimal basis for creating a Single Page.
I suggest taking backbone.layoutmanager . This is a wrapper over the backbone view and, with the right settings, it can itself pull up templates, cache them and render to the right place.
That is, the application architecture in the backbone should look like this:
When the page loads, we have the main element, which does not change, we specify it in our main parent view in the fieldel: "#main", after that we initialize the backbone-router and catch a callback from some kind of route, call the method on the main view setViewand pass a new child view there. The same thing happens when you click on the link, the router works out and a new view is inserted into the callback.
How to make a slide like on ios. I think having control over the old view (the parent has a method getView) and before inserting a new one ( setView), we can add some kind of class with animation to the old one so that it flies in some direction, and then insert a new view.

Answer 2

It seems that everything is obvious:
1. methods like page.navigation.transform
2. json response handler after the event and placement in the necessary containers.
PS: I use jquerymobile.com