jide.js — это новый инструментарий для создания современных веб-приложений. Он состоит из набора полезных элементов управления и всех инструментов, необходимых для создания собственных, специфичных для приложения компонентов. jide.js полностью охватывает AMD (require.js), чтобы вы могли выбирать только те его части, которые вам действительно нужны. Начиная с версии 1.0.0-бета3, вы также сможете использовать его с Browserify.
По своей сути jide.js построен на основе наблюдаемых значений, источников событий и привязки данных. Он использует возможности современных браузеров (IE9 +) для создания надежного кроссплатформенного взаимодействия и использования возможностей текущего языка JavaScript вместо того, чтобы цепляться за прошлое.
Введение в основные понятия
Прежде чем мы начнем создавать настоящее приложение jide.js, позвольте мне объяснить несколько основных понятий.
Наблюдаемые ценности
Observables — отличный способ синхронизировать различные части вашего приложения. jide.js позволяет вам подписываться на такие наблюдаемые и получать уведомления всякий раз, когда их значения изменяются. Пример этого показан ниже.
require(['jidejs/base/Observable'], function(Observable) { var counter = Observable(0); counter.subscribe(function(event) { console.log('counter changed', event.value); }); counter.set(1); // invokes the subscribed listener and prints to console }); При создании приложения jide.js вы можете выбрать один из нескольких наблюдаемых, таких как ObservableProperty , Observable.computed и ObservableList . Вычисляемая наблюдаемая может зависеть от других наблюдаемых и пересчитывается при изменении одной из ее зависимостей. Пример, который создает вычисляемую наблюдаемую, показан ниже.
var counterText = Observable.computed(function() { return 'You clicked the button ' + counter.get() + ' times!'; });
Если бы вы подписались на counterText , вы бы получали уведомление при каждом изменении counter . Следует обратить внимание на то, что вычисленные наблюдаемые, созданные таким образом, по умолчанию ленивы. Это означает, что их значение не вычисляется, если не требуется. Событие, передаваемое подписчикам, может не содержать значения.
Инстанцирующий контроль
Все элементы управления в jide.js имеют одинаковую сигнатуру конструктора. Все они ожидают ровно один аргумент, объект конфигурации. Продолжая предыдущий пример, вы увидите, как создать кнопку, метка которой привязана к наблюдаемому counterText мы создали ранее, и которая увеличивает counter при каждом нажатии.
var myButton = new Button({ // bind the "text" property of the button to the "counterText" observable text: counterText, // we can add event listeners inline on: { // we use the "action" event instead of the "click" event // to support keyboard invocation, etc. action: function() { // increment the counter counter.set(counter.get() + 1); } } }); // add the button to the document – you'd rarely do it this way, but it works document.body.appendChild(myButton.element);
Контроль, скин и шаблон
jide.js позволяет создавать ваше приложение так, как вы хотите, но рекомендуемый способ — использовать четкое разделение задач в ваших пользовательских элементах управления. Вот что мы будем делать в нашем примере.
В jide.js каждый элемент управления должен содержать свойства, которые должны отображаться. Например, кнопка должна иметь text и свойство icon . Кроме того, каждый элемент управления в jide.js имеет обложку, которая отвечает за построение внутренней структуры DOM элемента управления, включая обработчики событий, и внедрение данных в DOM.
Если вы хотите получить максимальную отдачу от jide.js, вы можете оставить создание DOM и привязку данных между DOM и элементом управления и его оболочкой для шаблона. В этом случае ваш скин должен содержать только обработчики событий и пользовательские свойства, которые важны для шаблона. Этот подход мы будем использовать до конца введения.
Создание приложения jide.js
Самый простой способ начать новый проект jide.js — использовать генератор Yeoman . Yeoman требует, чтобы на вашем компьютере были установлены node.js и npm . После этого выполните следующие команды в окне терминала:
npm install –g yeoman npm install –g generator-jidejs yo jidejs
Дайте вашей заявке имя, которое вам нравится, и скажите «нет» шине событий. Когда Yeoman закончит создание вашего проекта, вы можете посмотреть его, набрав grunt serve . Это запустит сервер и откроет ваш браузер, чтобы вы могли начать использовать свое приложение. Ваше новое приложение поддерживает прямую перезагрузку. Это означает, что ваш браузер будет автоматически обновляться при редактировании исходных файлов.
Теперь вы должны увидеть очень простое приложение, которое показывает текстовое поле, в котором вы можете ввести свое имя, и кнопку. Когда вы нажимаете кнопку, приложение приветствует вас.
Добавление списка задач в приложение
Затем откройте файл app/page/IndexPage.js в каталоге вашего проекта и измените его следующим образом:
define([ 'jidejs/base/Class', 'jidejs/base/ObservableList', 'jidejs/ui/Control', 'jidejs/ui/Skin', 'text!app/view/indexPage.html' ], function( Class, ObservableList, Control, Skin, IndexPageTemplate ) { function IndexPage(config) { this.tasks = ObservableList(config.tasks || []); delete config.tasks; Control.call(this, config); this.classList.add('page'); this.classList.add('index'); } Class(IndexPage).extends(Control); IndexPage.Skin = Skin.create(Skin, { template: IndexPageTemplate, addTask: function() { this.queryComponent('x-name').then(function(nameField) { this.component.tasks.add({ name: nameField.text }); nameField.text = ''; }.bind(this)); }, deleteTask: function(task) { this.component.tasks.remove(task); } }); return IndexPage; });
Изменения, которые вы только что применили, довольно просты. Вы добавили новое свойство, tasks , в IndexPage управления IndexPage . tasks заполняется из параметра конфигурации. Самое замечательное в том, что, поскольку вы используете ObservableList , пользовательский интерфейс будет обновляться автоматически при добавлении или удалении элементов из списка.
Теперь нам нужно изменить app/view/indexPage.html чтобы он отображал наш список задач. Измените содержимое файла на это:
<template> <input type="text" pseudo="x-name" bind=" is: 'jidejs/ui/control/TextField', on: { action: addTask.bind($item) } "> <button bind=" is: 'jidejs/ui/control/Button', on: { click: addTask.bind($item) } " text="Add"></button> <ul bind=" foreach: component.tasks "> <template> <li> <span bind="text: name"></span> <a bind=" is: 'jidejs/ui/control/Hyperlink', text: 'Delete', on: { action: $parent.deleteTask.bind($parent, $item) } ">Delete</a> </li> </template> </ul> </template>
Шаблоны в jide.js позволяют использовать привязку данных для обновления стандартных элементов HTML до элементов управления jide.js. Чтобы связать элемент, вам просто нужно добавить к нему атрибут bind . Синтаксис в этом атрибуте является литеральным объектом JavaScript (без открывающих и закрывающих скобок).
Указав привязку is , мы обновляем элемент до именованного элемента управления. Это значение должно быть именем действительного модуля AMD, который является элементом управления. Мы можем использовать привязку on для добавления прослушивателей событий в элемент HTML или элемент управления jide.js.
В выражении привязки есть несколько специальных переменных. Здесь мы используем $item и $parent . Для внешнего элемента template переменная $item ссылается на IndexPage . Во внутреннем элементе template $parent ссылается на скин, а $item ссылается на текущий объект задачи.
Привязка foreach позволяет нам перебирать коллекцию элементов и дублировать его дочерний узел template для каждого из элементов, над которыми он переходит. Если ему присвоено значение ObservableList , оно автоматически добавит, удалит и изменит свои дочерние узлы на основе изменений ObservableList .
Вывод
Как вы только что видели, jide.js предлагает разработчикам многое. Используя наблюдаемые значения, вы можете прекратить писать прослушиватели событий и просто привязать свои данные к пользовательскому интерфейсу. Создание пользовательских элементов управления не только просто, но и эффективно обеспечивает четкое разделение задач.
Эта статья служит только кратким введением в jide.js. Есть много других элементов управления, встроенных в jide.js, которые помогут вам создать ваше приложение, и представленный стиль — только один способ. Если вы предпочитаете не использовать шаблоны вообще, это тоже хорошо. Например, вы можете использовать такие операции, как filter , map и sort для создания вариантов обновления исходных данных в режиме реального времени.
Чтобы узнать больше о jide.js, посетите веб-сайт проекта, где вы можете найти множество примеров, демонстраций и руководств. Вы также перенаправлены в репозиторий GitHub проекта.