Прогрессивное улучшение - Node.js, Backbone.js

Сервер node.js выполняет две роли:

  • RESTFul API для маршрутов с префиксом / api
  • Отображает страницы веб-сайта на других маршрутах (/ / планы / особенности / условия ...)

На данный момент все мои страницы отображают «Загрузка страницы ...» в сочетании с приложением Backbone, которое заменяет DOM при запуске Backbone.router.

Я хотел бы создать страницы веб-сайта на стороне сервера, когда пользователь достигает страницы, и позволить Backbone обрабатывать следующую часть навигации, когда пользователь перемещается по веб-сайту.

Я знаю, как это сделать на стороне сервера, но на стороне клиента, когда страница загружается с уже созданной DOM, Backbone.router загружается, а затем заменяет DOM, потому что он не знает, что представление уже предварительно загружено.

Как исправить на стороне клиента?

Код:

Обновление: новый код: https://gist.github.com/mathieug/d50c861e63dd647f1c2b
Теперь мне нужно, чтобы метод runSlider вызывал при первой загрузке.


node.js javascript backbone.js progressive-enhancement
person mathieug    schedule 06.07.2014    source источник
comment
Можете ли вы также предоставить представление?   -  person Artem Volkhin    schedule 07.07.2014
comment
Конечно, просмотр условий: pastebin.com/et1mrbLK   -  person mathieug    schedule 07.07.2014
comment
Я только что добавил домашний вид   -  person mathieug    schedule 07.07.2014

Ответы (1)


arrow_upward
2
arrow_downward

Когда вы запускаете History, не забудьте передать {silent: true} в качестве опции, чтобы Backbone знал, что вы уже загрузили полную страницу. Это предотвратит замену маршрутизатором DOM, когда представление уже предварительно загружено (в первый раз).

Из документов Backbone.js:

Если сервер уже отрисовал всю страницу и вы не хотите, чтобы начальный маршрут срабатывал при запуске истории, передайте silent: true.

Итак, ваш код должен выглядеть так:

Backbone.history.start({pushState: true, silent:true});

person Ryan Erdmann    schedule 07.07.2014
comment
Отлично, именно то, что я искал. Но только вопрос, как мне начать события? Например, на моей домашней странице есть слайдер, а метод инициализации находится в HomeView. С RequireJS у меня нет доступа ни к какому виду. - person mathieug; 08.07.2014
comment
Я не уверен, что правильно понимаю этот вопрос. Когда вы выполняете this.homeView = new homeView();, где homeView - ваш HomeView загружается с помощью RequireJS, будет вызвана функция initialize на HomeView. - person Ryan Erdmann; 08.07.2014
comment
Хорошо, у меня есть слайдер в HomeView, который инициализируется методом runSlider (). Когда HomeView загружен, мне нужно вызвать этот метод runSlider (). Я вызываю это в рендере, но рендеринг не вызывается при первой загрузке (silent: true). Но если я также вызываю его при инициализации, он будет вызываться для всех представлений (мой маршрутизатор загружает все представления при его инициализации). - person mathieug; 09.07.2014
comment
Я меняю код, теперь создаю представления в маршрутах. Итак, теперь при первой загрузке метод инициализации больше не вызывается. Как запустить слайдер на HomeView? - person mathieug; 09.07.2014
comment
gist.github.com/mathieug/d50c861e63dd647f1c2b Как запустить слайдер в HomeView на первая загрузка? - person mathieug; 09.07.2014
comment
Где бы вы ни запускали свое приложение (т.е. где бы вы ни создавали экземпляр своего маршрутизатора, например, в файле app.js), вам необходимо создать объект HomeView. Так что где бы вы ни выполняли свой new MyRouter();, вам также необходимо делать var home = new homeView();. Однако вы не хотите вызывать render(), потому что DOM уже загружен страницей. Но вы хотите вызвать бегунок. Так сделай home.runSlider();. - person Ryan Erdmann; 09.07.2014
comment
Я не обязательно дома. Я бы хотел, чтобы слайдер автоматически запускался HomeView: инициализация или рендеринг. - person mathieug; 10.07.2014
comment
Если вы хотите, чтобы сервер отображал вашу страницу (при начальной загрузке), вам также не нужны ваши Backbone Views для визуализации HTML. Но вам все равно нужно прикрепить представления Backbone к элементам DOM, отображаемым сервером. Поэтому вам нужно определить, какая страница загружена, и инициализировать соответствующее представление, не вызывая рендеринга. Как вы это реализуете, зависит от вас, но вы должны понимать основную идею. Одна из возможностей - удалить параметр silent:true и сохранить логическое значение isFirst. Таким образом, в первый раз, когда ваш маршрутизатор сопоставляет маршрут, вы будете знать, что не следует вызывать рендеринг. - person Ryan Erdmann; 10.07.2014
comment
Я сделал это с помощью логического isFirstLoad, но мне действительно не нравится этот хитрый обходной путь. Мой сервер отображает мои страницы, это действительно просто, мне просто нужно загрузить события первого представления. Я думаю, что мне чего-то не хватает, потому что сегодня все огромные приложения Backbone визуализируют серверную часть для первой загрузки, и у них нет этой проблемы. - person mathieug; 10.07.2014