Предпочтительный способ создания ссылок с помощью backbone.js

Question

Я пытаюсь обернуть голову вокруг backbone.js, но мне трудно из-за отсутствия (IMO) хороших примеров.

Прежде всего, как лучше всего получить ссылку на объект.
Если я хочу получить правку для модели Album, я могу сделать album.url() + '/edit', действительно ли это лучший способ?

Кроме того, я пытаюсь заставить мое приложение работать на 100% без JavaScript, поэтому я не хочу, чтобы в моих URL-адресах / ссылках было указано /albums/#1/edit, я хочу, чтобы оно было /albums/1/edit, и переопределил это в JS. *

Я думаю, что создаю нормальные URL и использую jQuery.live для вызова router.navigate в backbone.js
Я никогда не получал это работать, однако, когда я звоню router.navigate('/albums/2', true), URL меняется, но мое действие показа никогда не вызывается. Если я обновляюсь, это называется, так что маршрут совпадает.

Чего мне не хватает?

Answer 1

Основной ответ, который немного разочаровывает: «Нет предпочтительного пути!».Backbone.js не говорит вам, как настроить ссылки, вы можете сделать это так, как вам нравится.Я нашел эту гибкость такой же раздражающей, как и вы, по крайней мере, на первый взгляд.

Итак, вот как я подхожу к этому на моем текущем проекте с (большой) оговоркой, что этоэто всего лишь один из многих способов сделать что-то в Backbone:

• По большей части я не использую реальные ссылки.Нет явной причины не делать этого, но это означает, что вы должны отслеживать кучу строк URL, которые должны быть согласованными.Я бы предпочел прикрепить все форматирование URL-адресов к своим маршрутизаторам и не заниматься ими в других местах.

• Чтобы открыть новый вид «верхнего уровня», например экран редактирования, я установил что-то, чтозапускает событие.В приложении, над которым я сейчас работаю, у меня есть модель глобального состояния, и для открытия нового представления я называю state.set({ topview: MyTopView }).Это приводит к тому, что объект state вызывает change:topview.

• Любой элемент пользовательского интерфейса, который необходимо изменить при изменении представления верхнего уровня, имеет метод обновления, связанный с change:topview,Когда событие запускается, они смотрят на state.get('topview') и обновляют по мере необходимости.

• Я рассматриваю свои маршрутизаторы как только незначительно специализированные части пользовательского интерфейса - по сути, это представления, которые отображаются вадресная строка браузера, а не окно.Как и другие представления, они обновляют объект state в событиях пользовательского интерфейса (т. Е. Новый URL-адрес), и, как и другие представления, они прослушивают объект state на предмет изменений, которые вызывают их обновление.Логика, что экран редактирования имеет URL albums/<albumid>/edit, полностью инкапсулирована в маршрутизаторе, и я не обращаюсь к нему где-либо еще.

Это хорошо работает для меня, но этодобавляет совершенно новый шаблон, глобальный объект State, к структуре Backbone, поэтому я вряд ли могу назвать это «предпочтительным» подходом.

Обновление: Также обратите внимание, что .url() видиома Backbone, относится к URL модели в back-end API , а не к front-end URL (это не похоже на get_absolute_url в Django).В стандартной конфигурации Backbone нет метода, который дает вам URL-адрес вашей модели для пользователя - вам придется написать это самостоятельно.

Answer 2

Кроме того, я пытаюсь заставить мое приложение работать на 100% без JavaScript; поэтому я не хочу, чтобы мои URL / ссылки говорили /albums/#1/edit, я хочу, чтобы он был /albums/1/edit, и переопределял это в JS.

вы можете сделать именно это с pushState. просто включите его в вызове Backbone.history.start:

Backbone.history.start({pushState: true})

это говорит Backbone использовать API истории HTML5 (a.k.a. "PushState"), который использует полные URL-адреса в точности так, как вы хотите.

Читайте об истории API здесь: http://diveintohtml5.ep.io/history.html

и я написал серию из 2 частей об использовании pushstate со второй частью, посвященной прогрессивному улучшению в магистральной сети, для выполнения того, что вам нужно:

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/

и

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

надеюсь, что это поможет:)