Как правильно организовать структуру приложения на клиенте, чтобы было как m.vk.com?

Question

[likejavascript]

Есть делаю Single Page Backbone.JS приложение для мобильников. Хочу сделать как Вконтакте, чтобы при "переходе" на другую страницу подгружать для нее шаблон и данные и рендерить вместо текущей. Могу конечно просто генерировать html из шаблона и данных и делать jQuery.replaceWidth(), но я заметил, что Вконтакт реплейсит только тело страницы, а в шапке просто меняет заголовок и добавляет кнопку "назад" для возврата на предыдущую страницу (причем делает с эффектом как на IOS).

Вопрос в следующем:
- Как правильно организовать "переход" по страницам, чтобы добиться такого же эффекта?
- Как генерировfnm макет страницы так, чтобы заменялись только те элементы, которые фактически изменились (например только заголовок страницы)

Answer 1

[Роман Лысов]

Backbone дает самую минимальную основу для создания Single Page.
Предлагаю взять backbone.layoutmanager. Это обертка над backbone view и умеющая при правильной настройки сама подтягивать шаблоны, кешировать их и рендрить в нужное место.

Template-rendering пример настроект как запрашивать шаблон. С такими настройками во view можно писать template: "main.html" и он запросить этот шаблон по пути "/templates/main.html"

Nested-views пример как можно заменить одну View на другую, использую у родительской метод setView( "#content", new NewView() )

То есть архитектура приложения в backbone должна выглядеть так:
При загрузке страницы у нас есть основной элемент, который не меняется, его мы указываем у нашей главной родительской view в поле el: "#main", после этого инициализируем backbone-router и ловим callback от какого нибудь роута, вызываем у главной view методsetView и передаем туда новую дочернюю view. То же самое происходит при клике на ссылку, отрабатывает роутер и в callback-е вставляется новая view.

Как сделать слайд как на ios. Думаю имея контроль над старой view(у родительской есть метод getView) и перед вставкой новой(setView), мы можем добавить старой какой нибудь класс с анимацией, что бы она улетала в какую нибудь сторону, а после вставить новую view.

Comments

[likejavascript]

Спасибо Вам большое за ответ. Где-то читал, что использование хэш-тега как-то влияет на производительность веб-приложения (особенно в веб). Так ли это и можно убрать решетку как в вконтакте?

[Роман Лысов]

likejavascript: Нет, использование хеша не влияет производительность)
Изменение url без перезагрузки(как в контакте) называется HTML5 History API вот описание на хабре habrahabr.ru/post/123106 , а вообще если вы используете backbone, то он умеет это делать и сам backbonejs.org/#History-start стоит только вызвать Backbone.history.start({pushState: true}) , где pushState: true означает обрабатывать не хеш, а url

[likejavascript]

Большое Вам спасибо за грамотный и развернутый ответ. Удачи Вам!

Answer 2

[xmoonlight]

Вроде, очевидно все:
1. методы типа page.navigation.transform
2. обработчик json ответа после события и размещение по нужным контейнерам.
PS: юзаю jquerymobile.com