Как реализовать привязку данных в Ext.js: практическое руководство

Добро пожаловать в наше практическое руководство о том, как заставить работать привязку данных в Ext.js JavaScript Framework! Привязка данных подобна волшебному клею, который соединяет внешний вид вашего веб-сайта с тем, что на нем меняется. Ext.js JavaScript Framework — отличный инструмент, который поможет вам легко это сделать. В этом блоге мы покажем вам весь процесс простыми шагами. Независимо от того, являетесь ли вы профессиональным программистом или только начинаете, мы рассмотрим основы.

Вы узнаете, как связать данные с частями Ext.js JavaScript Framework, чтобы ваш веб-сайт мог плавно реагировать и обновляться. К концу вы приобретете навыки, позволяющие сделать ваши веб-приложения более интерактивными и динамичными. Давайте начнем с привязки данных Ext.js!

Что такое привязка данных?

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

В Ext.js, наборе инструментов для веб-разработчиков, есть интересная функция, называемая двусторонней привязкой данных. Это означает, что когда вы что-то делаете на веб-сайте, например нажимаете кнопку или вводите текст в поле, данные обновляются. А когда данные меняются, сайт моментально обновляется. Это сделает ваш сайт более интерактивным и отзывчивым.

Каково значение привязки данных в веб-разработке?

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

Двусторонняя привязка данных в Ext.js.

Все типы привязок в Ext JS и Sencha Touch выполняются по знакомому процессу: они используют программы установки и обновления. Односторонняя привязка означает, что когда что-то меняется в ViewModel, конфигурация обновляется с помощью своего установщика. Двусторонняя привязка аналогична, но в ней используется программа обновления, похожая на специальный обработчик. Если программа обновления успешно изменяет конфигурацию, она также изменяет связанное значение в ViewModel, что обновляет другие привязки.

Чтобы конфигурация поддерживала двустороннюю привязку, вы можете использовать опцию «twoWayBindable». Обычно он используется скрыто, но может быть полезен при создании пользовательских представлений или компонентов. Например, Ext.field.Text настраивает свое «значение» для двусторонней привязки следующим образом:

twoWayBindable: {

значение: 1

}

В примере с полем счетчика при изменении его значения запускается программа обновления, которую перехватывает ViewModel. Затем это обновляет содержимое контейнера ниже, и все потому, что связана конфигурация «html». Это работает гладко, поскольку Ext.field.Spinner связан с Ext.field.Text, который настроен для работы с двусторонней привязкой его «значения».

Как установить и настроить Ext.js в среде разработки?

Чтобы получить пробную версию файлов библиотеки Ext JS, посетите веб-сайт Sencha по адресу https://www.sencha.com. После регистрации вы получите пробную версию по электронной почте в виде заархивированной папки с именем «ext-6.0.1-trial».

Распакуйте папку, чтобы найти различные файлы JavaScript и CSS для вашего приложения. Ключевые файлы JavaScript включают в себя:

1. ext.js : основной файл, содержащий все функции приложения.
2. ext-all.js : уменьшенная версия ext.js без комментариев.
3. ext-all-debug.js : неминифицированная версия ext-all.js для отладки.
4. ext-all-dev.js : еще одна неминифицированная версия, полезная для разработки с комментариями и журналами консоли.
5. ext-all.js : уменьшенная, готовая к использованию версия.

Вы можете добавить эти файлы в папку JS вашего проекта или указать прямой путь в вашей системе. Для CSS файлы на основе тем доступны в разных папках в зависимости от того, создаете ли вы настольное или мобильное приложение.

В вашем HTML-файле добавьте ссылку на необходимые файлы CSS и JavaScript. Альтернативно вы можете использовать сеть доставки контента (CDN), чтобы избежать локальной загрузки файлов. Ext JS совместим с различными браузерами, включая IE 6 и выше, Firefox, Chrome, Safari и Opera, что делает его универсальным для веб-разработки.

Как создать простое приложение Ext.js?

Вот простые шаги для быстрого создания приложения Ext JS:

Шаг 1. Установка пакетов из npm

Ext JS предлагает 30-дневные пробные пакеты, доступные в общедоступном реестре npm. Вы можете получить последнюю версию Ext JS, выполнив эту команду:

$ npm install -g @sencha/ext-gen

Для существующих пользователей Ext JS и связанные с ним пакеты находятся в частном реестре npm Sencha. Чтобы получить к нему доступ, войдите в реестр и установите npm, используя следующие команды:

$ вход в npm –registry=https://npm.sencha.com/ –scope=@sencha

$ npm install -g @sencha/ext-gen

Эти команды настраивают npm для получения и установки пакетов из реестра Sencha в области @sencha.

Шаг 2. Создание приложения

На этом этапе мы создадим простое приложение с двумя представлениями, включающее домашнюю страницу и сетку, используя следующую команду:

приложение ext-gen -a -t ModernDesktop -n ModernApp

Шаг 3. Изучение приложения

Теперь, когда наш проект создан, перейдите в этот каталог, используя:

компакт-диск ./современное приложение

Чтобы изучить свое приложение, запустите его с помощью следующей команды npm:

запуск НПМ

Эти шаги помогут вам быстро бесплатно установить резервную копию вашего приложения Ext JS с открытым исходным кодом.

Sencha: ваш партнер по исключительному пользовательскому интерфейсу — свяжитесь с нами!

Для чего используются модели в Ext.js?

Модель представляет собой разновидность данных внутри приложения. По своей сути модель состоит из набора полей и связанных с ними данных. Модель состоит из четырех ключевых элементов: полей, прокси, ассоциаций и проверок.

Поля

Поля модели указываются в свойстве «fields» в виде массива. Каждое поле описывается как объект JavaScript, содержащий такие атрибуты, как имя и тип.

Прокси

Прокси используются магазинами и решают задачи, связанные с загрузкой и хранением данных модели. Существует два типа прокси:

1. Клиентские прокси, которые используют память браузера или локальное хранилище для хранения данных.
2. Прокси-серверы отвечают за отправку данных на сервер с помощью таких методов, как Ajax, JSON-P или REST.

Ассоциации

Модели могут устанавливать связи друг с другом даже в небольших приложениях с несколькими моделями. Могут быть созданы различные типы ассоциаций, включая отношения «один к одному», «один ко многим» и «многие к одному».

Валидации

Валидации — это специализированные структуры, используемые для проверки правильности данных, хранящихся в определенных полях модели. ExtJS предоставляет набор стандартных проверок, частыми примерами которых являются проверки минимальной или максимальной длины поля.

Какова роль представлений в Ext.js?

Представления управляют визуальным аспектом и пользовательским интерфейсом приложения. Представления состоят из компонентов и макетов. Каждый компонент может служить контейнером для другого компонента, что позволяет структурировать интерфейс приложения как иерархическую коллекцию представлений.

В ExtJS доступны различные макеты:

1. FitLayout: этот макет расширяет внутренний элемент, чтобы он соответствовал границам родительского контейнера.
2. VBoxLayout: облегчает вертикальное расположение элементов.
3. HBoxLayout: облегчает горизонтальное расположение элементов.
4. BorderLayout: этот макет позволяет прикреплять элементы к одной из четырех сторон окна или закреплять их в центре.

Как настроить привязку данных между моделью и представлением?

Класс Ext.app.ViewModel имеет решающее значение для подключения к данным. Думайте об этом как об органайзере данных. Он похож на Ext.data.Model, но обрабатывает данные структурированным образом, как генеалогическое древо, а не просто список фактов. Он также имеет метод «bind()» для отслеживания изменений в этих организованных данных.

Теперь об этом генеалогическом древе данных: оно немного похоже на то, как знания передаются в семье. Ребенок может учиться у своего родителя, родитель у своего родителя и так далее. В нашем случае даже «внучатые» компоненты могут учиться у компонентов более высокого уровня. Все дело в эффективном обмене информацией.

Настройка привязки данных между моделью и представлением в Ext JS включает несколько важных шагов:

1. Создайте модель . Сначала определите модель, которая представляет структуру данных, с которой вы хотите работать.Эта модель должна включать поля, соответствующие данным, которые вам необходимо отображать в представлении.
2. Создайте ViewModel : ViewModel выступает в качестве посредника между вашей моделью и представлением.Он управляет данными и предоставляет возможность привязать их к компонентам вашего представления. Вы можете создать ViewModel в своем контроллере или представлении.
3. Привязка данных к компонентам : используйте метод привязки ViewModel, чтобы соединить поля вашей модели с компонентами в вашем представлении.Например, если у вас есть текстовое поле, в котором должно отображаться имя человека, вы можете привязать его к соответствующему полю в вашей модели.

модель просмотра: {

формулы: {

полное имя: функция (получить) {

var firstName = get('user.firstName');

вар LastName = get('user.lastName');

вернуть имя + '' + последнее имя;

}

}

},

предметы: [{

xtype: 'текстовое поле',

fieldLabel: 'Имя',

привязка: '{user.firstName}'

}, {

xtype: 'текстовое поле',

fieldLabel: 'Фамилия',

привязка: '{user.lastName}'

}, {

xtype: 'текстовое поле',

fieldLabel: 'Полное имя',

связывание: '{fullName}' // Это вычисляемое поле

}]

«`

4. Обновить данные : когда вы обновляете данные в своей модели (например, когда пользователь вводит новое значение), механизм привязки данных автоматически обновляет подключенные компоненты представления.Аналогично, когда пользователь взаимодействует с компонентами представления (например, редактирует поле), изменения будут отражены обратно в модель.

Заключение

Ext JS предоставляет разумный способ связать данные и то, что вы видите на веб-странице. Настроив модели и подключив их к элементам вашей веб-страницы, вы можете быть уверены в том, что данные изменятся. Более того, ваша веб-страница обновляется автоматически, и когда пользователи взаимодействуют с вашей веб-страницей, изменения сохраняются в ваших данных.

Это упрощает создание веб-приложений, улучшает взаимодействие пользователей с вашим сайтом и упрощает разработчикам создание динамических и адаптивных веб-приложений. Ext JS упрощает весь процесс создания HTML-кода, делая веб-разработку более эффективной и удобной для пользователя.

Часто задаваемые вопросы

Что такое Ext.js и зачем использовать его для привязки данных?

Ext JS — это фреймворк JavaScript. Он упрощает привязку данных, эффективно создавая адаптивные веб- и мобильные приложения.

Какие инструменты мне нужны для привязки данных Ext.js?

Чтобы начать привязку данных Ext.js, вам понадобится платформа Ext.js, редактор кода и веб-браузер.

Что такое адаптивный веб-дизайн?

Адаптивный веб-дизайн адаптирует веб-компоненты к экранам различных размеров, обеспечивая оптимальное взаимодействие с пользователем на настольных компьютерах, планшетах и ​​мобильных телефонах.

Является ли JQuery JS Framework?

Нет, jQuery не является инфраструктурой JavaScript; это библиотека для упрощения манипуляций с DOM и запросов AJAX.