У Backbone было несколько ограничений. Вы можете представить себе быструю последовательность загрузки страниц, используя его. Для нас это действительно потеряло баллы за удобство для разработчиков. На первый взгляд небольшой, но распространенный пример: Model.get(). Это прерывает мой поток javascript. Нужно ли мне .get или только . для обхода этого графа объектов? Комбинирование get с вложенными моделями и объектами особенно запутано. Мой разум часто перебирал перестановки: model.get(‘address.zip’), model.get(‘address’).get(‘zip’) или model.get(‘address’).zip? К счастью, последние устройства Android и iOS уже составляли 85% нашего мобильного трафика, поэтому нам было удобно полагаться на Object.defineProperty ES5, чтобы разблокировать собственный синтаксис обнаружения изменений Rivets.
Угловой, еще нет
Angular пострадал от загрузки страницы. Следуя библиотечным соглашениям, нам пришлось бы ждать, пока загрузится, проанализирует и выполнится более 100 000 javascript, прежде чем мы сможем показать большую часть ценности нашему посетителю. Вдохновленные фразой Брайана МакКуэйда рекомендация быстрой мобильной страницы, мы решили, что это неприемлемо. Декларативная привязка Angular действительно ускорила распределение кода и вызвала положительные эмоции в проектах, которые ее использовали, поэтому мы были рады обнаружить аналогичные привязки Rivets с меньшим количеством убеждений и гораздо меньшим весом страницы.
Заклепки, используйте это сейчас
Заклепки очень ограничены в возможностях. С ним вы получаете привязку и немного форматирования. Вот и все. Нам пришлось решить еще много архитектурных соглашений, например, когда выполнять привязку и к чему привязываться (следите за предстоящим сообщением, в котором будет подробно описана последовательность загрузки страницы, на которой мы остановились). Появились две детали Rivets, которыми стоит поделиться: контексты привязки и вложения.
В браузерах, поддерживающих Object.defineProperty, Rivets будет привязываться к любому объекту. Документы Rivets ссылаются на этот объект как на контекст. Мы привязали простые представления непосредственно к моделям предметной области. Для более сложных представлений мы заключили логику взаимодействия в объекты, напоминающие области действия Angular.
Эти объекты предоставляли методы для вызова из привязок или тестов. Рассмотрите свою корзину для покупок. Мы суммируем количество угощений, которые вы получаете, в общее количество, отображаемое в правом верхнем углу. Этот счетчик поддерживается привязкой непосредственно к модели basket. Когда вы нажимаете кнопку «плюс», привязка заклепок вызывает метод связанной модели basket. Та же модель привязана к представлению. Эти два соглашения позволили нам подключить простые привязки с минимальным шаблоном (без решения, когда выполнять рендеринг и повторный рендеринг) и дали нам ожидаемое место для добавления и тестирования более сложных подключений.
Поведение первых 50 или около того пикселей мобильного сайта, назовем их верхней панелью, сильно меняется. Это ценное место на маленьком экране. Мы разбили поведение на несколько контекстов, чтобы сложность не взорвала наш мозг. Привязать несколько контекстов к одному и тому же дереву DOM с помощью Rivets не совсем просто, но вполне выполнимо. По умолчанию, когда вы привязываете контекст к элементу, все дочерние элементы привязываются к одному и тому же контексту.
Для нас это означало, что привязки корзины получили верхний контекст навигации вместо модели корзины. Бум. Сломанный. К счастью, Rivets позволяет вам объявлять пользовательские префиксы для ваших привязок. Мы приняли соглашение ставить перед каждой привязкой имя контекста. Это позволяет нам привязать rv-top-nav-* сразу после загрузки страницы, а позже привязать rv-basket-* к вложенным элементам.
div 'rv-top-nav-show': 'state | is full', ->
a '.logo', href: "/", ->
i '.icon.icon-logo', alt: 'good eggs'
# other top nav code ...
a '#basket.icon', href: "/basket", ->
i '.icon.icon-basket'
div '.items-count', 'rv-basket-text': 'itemsCount', '0'
И затем привязка к нашим объектам:
module.exports = ->
state: 'full'
bind: ->
@el = $('.top-nav')
rivets.bind @el.toArray(), @,
config:
prefix: 'rv-top-nav'
@
bindToSession: (session) ->
@user = session.user
rivets.bind $('#basket').toArray(), session.basket
config:
prefix: 'rv-basket'
@
Заклепки декларативных связующих камней для мобильного интернета. Попробуйте!
Первоначально опубликовано Адамом Халлом 25 апреля 2014 г.
Хорошие яйца связывают людей, которые любят еду, напрямую с теми, кто ее готовит. Мы доставляем самую невероятную еду прямо в дома в районе залива. Если вас вдохновляет наша миссия — развивать и поддерживать местные продовольственные системы по всему миру, узнайте, как вы можете помочь.
