Перенос самой сложной части приложения на клиентскую часть становится все более распространенным явлением, поэтому серверные языки относятся только к тем, которые поддерживают постоянство с помощью служб REST .
Часть ответственности за то, что все это происходит, заключается в новых способах работы с JavaScript и создании динамических и отзывчивых пользовательских интерфейсов благодаря различным существующим средам .
Эта структура имеет много сильных сторон, таких как ее небольшой вес и документация, и она занимает много времени на рынке, поэтому она постоянно созревает для применения в производственных средах.
требования
1. Поскольку большинство библиотек и JavaScript- инфраструктур не требуют особых требований, в этом случае нам понадобится небольшой веб-сервер для лучшей обработки наших запросов, это может быть Wamp в Windows или экземпляр Apache в Linux или Mac .
2 - Нам нужен текстовый редактор в стиле Sublime Text или NotePad ++, чтобы иметь возможность писать код, необходимый для выполнения примеров и упражнений, которые мы будем показывать.
3 - Наконец, нам нужен доступ в Интернет, чтобы иметь возможность загрузить Knockout.js даже один раз.
установка
Процесс установки довольно прост и не зависит от конкретной платформы, процесс будет одинаковым, будь мы на Windows, Linux или MAC .
Первое, что мы должны сделать, это загрузить Knockout.js с его официального сайта, для этого мы можем перейти на сайт проекта и в разделе загрузок щелкнуть правой кнопкой мыши и выбрать опцию Сохранить ссылку как :
Важно, чтобы мы сохранили файл в папке, относящейся к нашему проекту, чтобы включить его. Его также можно установить с помощью Bower или даже использовать его с одного из сервисных CDN, чтобы вам не приходилось использовать наш сервер в качестве хранилища библиотек.
Когда у нас есть файл, вам просто нужно включить его в файл HTML следующим образом:
Установка Knockout.jsКак мы видим, нам нужно было только включить загруженный файл через тег скрипта. В случае, если мы хотим работать с версией CDN, нам нужно всего лишь изменить локальный маршрут к Интернет-пути файла, это очень похоже на работу с библиотеками, такими как jQuery, или средами, такими как AngularJS .
Модель Vista Vista Модель
Название этого раздела может показаться ошибкой. Как можно говорить о модели Vista Vista? Разве это не то же самое? Оказывается, у Knockout есть шаблон проектирования или парадигма разработки, в которой он черпает вдохновение из MVC, где модель и Vista, безусловно, ведут себя так, как мы знаем о «классическом» подходе, однако у нас есть новый слой под названием VistaModelo, который отвечает за Присоединяйтесь и дайте функциональность нашим взглядам.
Привязка данных
Привязка данных - это главная особенность нашей инфраструктуры, которая позволяет нам указывать в документе HTML, какие элементы вам следует предоставить доступ к Knockout.js, хотя это звучит как нечто сложное, мы можем обобщить его как нечто более простое, это простое приложение свойств для элементов дерева DOM, где мы хотим иметь действие Knockout.js .
Давайте рассмотрим следующий пример кода, скажем, мы хотим напечатать имя из нашей VistaModel на этикетке внутри тела, для этого нам просто нужно сделать следующее:
Установка Knockout.jsМы видим, что в нашем теге h1 есть тег span, и у последнего есть свойство, не являющееся нативным для HTML, которое является свойством привязки данных, это то, что позволяет нам в этом случае просто подключить Knockout.js к нашему дереву DOM. Мы указали, что должно быть взято имя свойства или переменной нашего VistaModelo .привет
var viewModel = function () {this.name = 'World!'; }; ko.applyBindings (viewModel);
Если мы выполним наш пример в браузере, мы получим результат, подобный тому, который мы видим на следующем изображении:
С этим мы уже сделали наше первое приложение, используя Knockout.js .
Немного больше VistaModelo
К настоящему времени мы, должно быть, поняли, что философия VistaModelo является важной частью работы на Knockout.js, поэтому мы продолжим углубляться в эту тему.
VistaModel Создание
Существует два способа создания VistaModelo, базовая и объектно-ориентированная форма, которую мы используем, уже зависит от нашего способа разработки, хотя рекомендуемый является объектно-ориентированным, поскольку, хотя в начале он более сложный, он позволяет нам достичь лучшего порядка В нашем приложении.
Чтобы создать базовую модель Vista, нам нужно сделать что-то вроде следующего:
var miVistaModelo = {name: 'Pedro Perez'}; Как мы видим, это не сложно, мы просто определяем переменную и размещаем контент в стиле JSON . Теперь объектно-ориентированный способ позволяет нам создавать методы доступа и манипулирования свойствами, которые мы хотим разместить в нашем VistaModelo, для этого мы можем сделать что-то вроде следующего:
var miVistaModeloOO = function () {var self = this; self.name = 'Джонатан'; self.name = 'Acosta'; self.getName = function () {return self.name + '' + self.name; };}; Если мы хотим в этом случае, мы можем напрямую получить доступ к имени или фамилии по отдельности или использовать метод getName (), который дает нам имя и фамилию вместе или объединенными. Здесь многие могут задаться вопросом, не было ли проще сделать одну строку с именем и фамилией, ответ очень прост, чем больше у нас вариантов, тем проще будет приложение, на наш взгляд, представьте, что мы хотели бы только имя, с базовая форма, которую мы должны были бы обработать, чтобы разделить их, вместо объектно-ориентированного мы получаем доступ только к интересующему нас свойству.
VistaModel с параметрами
Пока что то, что мы видели, очень статично, что если мы теперь начнем использовать параметры, таким образом VistaModelo может служить многим целям, поскольку мы не будем ограничиваться тем, что мы устанавливаем, но мы можем изменять данные в соответствии с ситуация.
Мы перепишем нашу объектно-ориентированную форму и будем использовать следующую форму:
var miVistaModeloOO = функция (имя, фамилия) {var self = this; self.name = имя; self.name = фамилия; self.getName = function () {return self.name + '' + self.name; };}; Как мы могли бы оценить, было очень легко реализовать использование параметров, теперь мы собираемся реализовать это в нашем первом примере и, таким образом, посмотрим, как все происходит, для этого мы будем использовать следующий HTML-код: Установка Knockout.jsЗдесь первое, что мы замечаем, это то, что привязка данных больше не является текстовой, как в первоначальном примере, но если мы используем html, это позволяет нам отправлять html- теги и, таким образом, иметь возможность придать больше стиля нашему ответу VistaModel .привет
var miVistaModeloOO = функция (имя, фамилия) {var self = this; self.name = имя; self.name = фамилия; self.getName = function () {return self.name + '' + self.name; }; }; var viewModel = new miVistaModeloOO ('Джонатан', 'Acosta') ko.applyBindings (viewModel);
Уже в разделе, где мы определяем наше VistaModelo, мы видим, что перед применением привязки Knockout.js мы создаем экземпляр нашего VistaModel, ориентированного на объекты, именно в этот момент мы можем присвоить значения нашим параметрам или свойствам, поскольку мы видим, что мы сохранили наши разделение имени и фамилии, но в конце мы можем использовать метод, который объединяет их.
Когда мы запускаем наш пример, в браузере появляются следующие результаты:
Будут те, кто задается вопросом, у кого есть такая структура, которую AngularJS или Backbone.js больше не предлагает, и они правы в своих вопросах, однако мы даем им ответ, что это только еще один вариант, который они могут иметь в наличии, он имеет свои сильные стороны, такие как хорошая документация и небольшой вес ее реализации (всего около 20 кб), но, как и все, каждый волен выбирать инструмент, который позволяет им достигать своих целей и который наилучшим образом соответствует требованиям момента.
На этом мы завершим наш урок, мы успешно сделали первые шаги с Knockout.js, с этого мы можем начать думать обо всех возможностях, предлагаемых этой средой разработки приложений, с логикой клиентской стороны.$config[ads_text6] not found
СТАТЬИ