Содержание
Я уверен, что все разработчики JavaScript слышали это «о… боже мой!» момент, когда они впервые познакомились с такими фреймворками, как jQuery или MooTools. Осознание того, что то, что было кошмаром кроссбраузерной проводки и подробных команд, было заменено простым, лаконичным и универсальным интерфейсом, делающим доступ к DOM браузера простым ветерком.
Что ж, как эти фреймворки произвели революцию в доступе к DOM, Knockout стремится революционизировать взаимодействие с пользователем. Предоставляя простой двусторонний механизм привязки между вашим пользовательским интерфейсом и вашей моделью представления, Knockout заботится обо всех связях и привязках событий, чтобы поддерживать их постоянную синхронизацию.
Далее следует руководство из двух частей по созданию примера приложения Slidr (простой генератор слайд-шоу), которое демонстрирует некоторые из основных функций, которые большинство разработчиков использовали бы в реальной жизни. Начиная с основ Knockout и заканчивая интеграцией Knockout с существующими сторонними компонентами пользовательского интерфейса. К концу вы обязательно скажете: «О… Боже мой!» снова.
Изменения
Здесь, в Umbraco, мы переживаем множество изменений. Захватывающие изменения. Вот уже несколько лет мы разрабатываем одну из самых сильных и гибких CMS с открытым исходным кодом для работы на платформе .NET (вы, возможно, видели недавний учебник, который мы опубликовали в выпусках журнала .net за февраль / март). За эти годы система выросла и адаптировалась вместе с потребностями общества. Сегодня мы приступаем к одному из самых больших улучшений системы на сегодняшний день, Umbraco 5. Перестроенная и обновленная версия с использованием некоторых из последних достижений веб-технологий, гарантирующая, что наша система продолжает расти и адаптироваться в течение многих лет. прийти.
В рамках этого обновления будут обновлены способы обработки взаимодействия наших пользователей с системой. Современные пользователи ожидают большего от пользовательского интерфейса. Они ожидают, что это будет гладко, и они ожидают, что это будет мгновенно (спасибо Apple). Итак, после изучения различных фреймворков, Knockout стал нашим явным победителем.
Так почему нокаут?
- Он легкий. При использовании HTTP-сжатия всего 39 КБ или 13 КБ, этого достаточно для использования в любом проекте.
- Работает с любыми фреймворками. Да, мы тоже используем jQuery, но хорошо знать, что он может работать с чем угодно.
- Это хорошо задокументировано. До сих пор у нас не было вопроса, на который мы не смогли бы найти ответ в документации.
- Это требует минимальных изменений в том, как вы уже работаете. Нет ничего хуже схемы, которая просит вас забыть все, чему вы научились на сегодняшний день. С Knockout он дополняет ваши существующие знания.
Так что, надеюсь, сейчас вы чувствуете себя хорошо, чтобы испытать нокаут, но вместо того, чтобы я провел вас через все, что мы использовали в Umbraco 5 (это может быть довольно длинным учебником), я собрал образец приложения для демонстрации некоторых ключевых функций Knockout, которые вы, вероятно, будете использовать снова и снова (если вы хотите увидеть, как мы использовали его в Umbraco 5, непременно скачайте его себе CodePlex).
Итак, без лишних слов, я даю вам slidr, генератор слайд-шоу Knockout.
Чтобы использовать slidr, просто введите термин для поиска изображений на Flickr, и slidr автоматически найдет их для вас. Из результатов перетащите понравившиеся изображения на временную шкалу внизу. Вы можете отсортировать временную шкалу, перетащив изображения в нужном порядке, и изменить заголовок изображения, щелкнув его и отредактировав в области предварительного просмотра. Чтобы удалить изображение с временной шкалы, вы можете нажать маленький крестик в углу изображения, а чтобы запустить слайд-шоу, просто нажмите кнопку запуска в правом нижнем углу.
Так что, если вы еще этого не сделали, попробуйте. Я буду здесь, когда ты вернешься.
Сделал это? Хорошо, тогда приступим.
Создание HTML
Я предполагаю, что вы немного разбираетесь в HTML, поэтому идея состоит в том, чтобы просто создать дизайн и макет приложения. Сходите с ума и создайте свой собственный или просто воспользуйтесь HTML-шаблоном, доступным для загрузки. Основные компоненты, которые вам понадобятся: область поиска, включая поле ввода поиска, и место для отображения результатов поиска; область шкалы времени для добавления / упорядочивания выбранных фотографий; область предварительного просмотра, чтобы показать увеличенный предварительный просмотр выбранной фотографии, с текстовым полем для редактирования заголовка фотографии; и, наконец, кнопка запуска для запуска слайд-шоу.
Добавление скриптов
Теперь, когда у нас есть настройка дизайна, пора заставить его кое-что сделать. Но прежде чем мы сможем приступить к написанию сценариев, нам нужно включить несколько библиотек. Так что включите следующие сценарии в заголовок вашего HTML-документа.
script type = "text / javascript" src = "js / jquery-1.7.1.min.js"> / script> script type = "text / javascript" src = "js / knockout-2.0.0.js"> / script> script type = "text / javascript" src = "js / knockout.mapping-latest.js"> / script>
Мы начинаем с включения библиотеки jQuery, затем библиотеки Knockout и подключаемого модуля сопоставления Knockout (мы скоро вернемся к тому, что это делает).
Чтобы сохранить наш код отдельно от нашей презентации, мы также создадим и включим файл JavaScript для хранения всего кода, который мы собираемся написать в этом руководстве. Итак, в папке со сценариями просто создайте пустой файл JavaScript и также включите его в раздел заголовка.
тип скрипта = "text / javascript" src = "js / slidr.js"> / script>
Теперь, когда мы зарегистрировали наши включения, самое интересное может начаться.
Searching
Первое, что мы реализуем, - это поиск изображений. Для этого мы собираемся использовать Flickr и их JSON API. Чтобы использовать Flickr API, вам необходимо зарегистрироваться для получения ключа API, или, если вы просто хотите попробовать его в этом руководстве, вы можете просто использовать мой демонстрационный пример: 60aa42175d788be84e5c4cb0d659e7ef.
Откройте файл сценария, созданный на последнем шаге, и приступим.
Для начала, и это один из краеугольных камней Knockout, мы сначала создадим нашу модель представления. Модель представления - это просто объект, для которого мы определяем свойства различных переменных, которые хотим отслеживать:
var viewModel = {searchTerm: ko.observable («»), searchTimeout: null, foundPhotos: ko.observableArray ([])};
В нашей модели представления мы определили свойства для хранения значения введенного условия поиска, одно для хранения функции тайм-аута, которая будет выполнять наш фактический поиск с небольшой задержкой, и свойство для хранения результатов поиска, которые мы получаем от поиска.
К настоящему времени вы, наверное, заметили забавные значения некоторых свойств, которые мы только что определили, и задаетесь вопросом, для чего они все. Вот как вы сообщаете Knockout, что хотите, чтобы ваша собственность была привязанной. Используя ко. наблюдаемый или же ko.observableArray (для переменных типа массива, конечно) Knockout будет отслеживать любые изменения этих свойств и уведомлять любые связанные элементы об этих изменениях, как только они происходят. Параметры, которые мы передаем наблюдаемым методам, - это просто значения по умолчанию, которые мы хотим, чтобы эти свойства имели.
Итак, наличие наблюдаемых свойств само по себе бессмысленно, поэтому теперь мы захотим подключить элементы, которые будут влиять или на которые повлияют изменения этих свойств. Для этого мы используем простой синтаксис привязки данных в наших HTML-элементах.
В поле ввода поиска добавьте следующий атрибут привязки данных:
input id = "search-term" type = "text" data-bind = "value: searchTerm, valueUpdate:’ afterkeydown ’, событие: {keyup: search}" />
Атрибут data-bind - это то, что Knockout использует для привязки элемента к свойству модели представления. Он сообщает Knockout, как это должно повлиять на это свойство или как на него должны повлиять изменения этого свойства.
Так что же говорит о нокауте поле ввода для поиска? Ну, первая привязка, которая у нас есть, это значение: searchTerm. Это означает, что при внесении изменений в атрибут значения input он должен автоматически обновлять искать термин недвижимость на нашей viewmodel. Кроме того, если искать термин свойство обновляется где-нибудь в приложении, то оно должно автоматически обновляться с новым значением. Вторая привязка у нас есть valueUpdate: «afterkeydown». Это говорит о том, что Knockout должен обновить свойство connected после захвата события нажатия клавиши. По умолчанию Knockout обновляет свойства, когда фиксируется событие изменения (для полей ввода это обычно происходит, когда поле теряет фокус), но поскольку мы хотим искать изображения, когда пользователь вводит текст, мы можем указать Knockout обновляться после нажатия клавиши. .
Наше последнее обязательное заявление событие: {keyup: search}. Теперь это довольно интересно и немного отличается от других, поскольку в основном это указывает Knockout на привязку к событию, вызванному нашим полем ввода, в данном случае клавиатура, и вместо обновления значения вызовите метод в нашей модели представления, «поиск». У нас пока нет метода поиска для нашей модели представления, поэтому давайте добавим его.
var viewModel = {searchTerm: ko.observable («»), searchTimeout: null, foundPhotos: ko.observableArray ([]), search: function () {console.log (this.searchTerm ()); }};
Правильно, в модели представления можно определять как свойства, так и методы. Оба из них могут быть привязаны к элементам и автоматически синхронизироваться / запускаться Knockout при возникновении изменений.
Итак, мы определили нашу модель представления и добавили наши привязки, теперь осталось только одно, что нам нужно сделать, чтобы Knockout склеил все вместе.
$ (функция () {ko.applyBindings (viewModel);});
Это запускает Knockout, связывая все атрибуты привязки данных, которые мы определили в нашем HTML-документе, с соответствующими свойствами в переданной модели представления (я также обернул это в jQuery document.ready wrapper, чтобы это происходило только тогда, когда документ готов).
Итак, теперь мы можем протестировать поле ввода для поиска, чтобы убедиться, что все работает правильно. Откройте свое приложение в браузере и с помощью панели инструментов разработчика проверьте журнал консоли JavaScript. По мере ввода в поле ввода поиска вы должны начать видеть журнал клавиш, которые вы вводили после каждого нажатия клавиши.
Хацзааа!
Теперь, когда мы знаем, что наши привязки работают, давайте конкретизируем метод поиска для выполнения фактического поиска:
var flickerApiKey = «YOUR_FLICKER_API_KEY»; var viewModel = {… search: function () {// Очистить текущий список найденных фотографий viewModel.foundPhotos ([]); // Искать только в том случае, если термин поиска равен или длиннее 3 символов if (this.searchTerm (). Length> = 3) {// Очистить все ранее начатые поиски clearTimeout (viewModel.searchTimeout); // Устанавливаем тайм-аут для поиска в 1 секунду (предотвращает поиск после каждого нажатия клавиши) this.searchTimeout = setTimeout (function () {// Выполнение поиска var url = "http://api.flickr.com/services/rest/ ? method = flickr.photos.search & api_key = "+ flickrApiKey +" & tags = "+ viewModel.searchTerm () +" & per_page = 100 & format = json & jsoncallback =? "; $ .getJSON (url, function (data) {if (data.stat == "ok") {// Сопоставляем результаты ko.mapping.fromJS (data.photos.photo, photoMappingOptions, viewModel.foundPhotos);}});}, 1000); }}};
Надеюсь, большая часть этого имеет смысл. По сути, вызов поиска очищает все предыдущие результаты, а затем, если поисковый запрос длиннее трех символов, запускает новый поиск. Мы задерживаем поиск на одну секунду, чтобы не тратить зря вызов API, пока пользователь печатает. Наконец, мы вызываем Flickr API через getJSON позвонить и в Перезвоните , мы сопоставляем результаты с наблюдаемым объектом.
Единственное, что действительно стоит здесь упомянуть, - это, во-первых, способ установки переменных, которые определены как наблюдаемые, и, во-вторых, действие сопоставления объекта JSON с наблюдаемым объектом.
При получении или установке наблюдаемого свойства мы должны обращаться к ним, как если бы они были методами, поэтому вместо viewModel.myProperty = «значение»; нам нужно установить значение вроде viewModel.myProperty («значение»); аналогично, чтобы получить значение, мы должны вызвать viewModel.myProperty (); а не просто viewModel.myProperty;.
Чтобы помочь при работе с внешними данными, в Knockout есть некоторые служебные методы, которые помогают отображать данные, чтобы их можно было наблюдать. Таким образом, вместо того, чтобы определять объект и самостоятельно настраивать все свойства как наблюдаемые, Knockout может перебирать свойства ваших данных и скрывать их все до наблюдаемых для вас. Для этого мы используем ko.mapping.fromJS метод. Этот метод принимает три аргумента: объект, который нужно преобразовать в наблюдаемый объект, объект настроек и свойство модели представления, которое необходимо обновить с помощью обработанного объекта.
По умолчанию Knockout просто сопоставляет все свойства, которые он может, с наблюдаемыми, однако мы можем изменить или расширить это с помощью объекта настроек. В нашем примере мы передаем photoMappingOptions объект. Код для этого следующий (вы также должны добавить это в свой файл сценария).
var photoMappingOptions = {’create’: function (o) {var photo = ko.mapping.fromJS (o.data); photo.smallImageUrl = "http: // farm" + photo.farm () + ". static.flickr.com/"+ photo.server () +" / "+ photo.id () +" _ "+ фото. secret () + "_ s.webp">
Заключение
В этой части мы рассмотрели основы Knockout, как определить модель представления и привязать ее к элементам HTML, а также как работать с внешними данными.
Во второй части мы рассмотрим, как использовать сторонние компоненты вместе с Knockout, и закончим работу над нашим слайдером.
Дополнительные ресурсы
Цель этого руководства - показать вам некоторые из основных концепций Knockout, однако я не мог охватить каждую мелочь, поэтому, если вы хотите узнать больше, обязательно ознакомьтесь с разделом документации по Knockout. сайт.
Если вы нашли этот учебник слишком большим, вы также можете попробовать его на сайте Knockout. Они будут постепенно наращивать ваши знания.
