Выберите правильную библиотеку
Очень сложно создать приложение JS без хороших инструментов. JQUERY - это просто библиотека для эксплуатации DOM и не предоставляет никаких оснований для создания приложения. Вот почему мы хотим, чтобы специальная библиотека, похожая на CANJS.
CANJS - это легкая библиотека MVC, которая предоставляет инструменты, необходимые для создания приложения JS.
CANJS - это легкая библиотека MVC, которая предоставляет инструменты, необходимые для создания приложения JS. Он обеспечивает базовую структуру с режимом MVC (модель-View-Control), динамическое привязка шаблона, поддержку маршрута и безопасность памяти. Он также поддерживает jQuery, Zepto, Mootools, Yui, Dojo и имеет богатые расширения и плагины.
Часть первая вы узнаете:
Создать уровни управления и просмотра (шаблоны пользовательского интерфейса) для отображения контактов
Используйте модельный уровень модели для представления данных
Используйте плагин с матчем для моделирования AJAX для возврата данных
Вы должны быть взволнованы! Давайте начнем кодирование.
Создайте свои папки и HTML
Сначала вы создаете папку для своего приложения, а затем создаете 4 подпапки в каталоге: CSS, JS, представления и IMG. следующее:
contacts_manager
CSS
младший
виды
IMG
Сохраните следующий код как index.html:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<Title> Canjs Contacts Manager </title>
<link rel = "styleSheet" href = "css/bootstrap.min.css">
<link rel = "styleSheet" href = "css/contacts.css">
</head>
<тело>
<div>
<div>
<div>
<h1> Контакт -менеджер </h1>
</div>
</div>
<div>
<div>
<div>
<NAV ID = "Filter"> </NAV>
</div>
</div>
<div>
<div id = "create"> </div>
<div id = "контакты"> </div>
</div>
</div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script>
<script src = "js/can.jquery.min.js"> </script>
<script src = "js/can.fixture.js"> </script>
<script src = "js/contacts.js"> </script>
</body>
</html>
Внизу страницы вы загружаете необходимый JS (включая ваше приложение: contacts.js).
CSS и файлы изображений, используемые в учебном пособии, могут быть загружены.
Используйте представление, чтобы создать свой пользовательский интерфейс
Просмотр используется для отображения шаблона пользовательского интерфейса вашего приложения. CANJS поддерживает множество шаблонных двигателей. В этой статье используется EJS, который включает и поддерживает динамическую связующую среду.
Теги шаблонов EJS очень похожи на HTML и поддержку, содержащую код JS. Три часто используемые теги следующие:
< % Код %> выполнить JS
< %= Code %> выполнить JS и записать не вмешанные результаты в HTML в текущем месте
< %== Code %> Выполните JS и напишите сбежавший результат HTML в текущем месте (для подразделений).
Шаблон может быть загружен из файла или тега скрипта, и этот урок загружен из файла EJS.
Показать контакты
Чтобы создать контакт, вы должны сначала создать шаблон EJS и сохранить следующий код в качестве contactslist.ejs в папке ваших представлений:
Кода -копия выглядит следующим образом:
<ul>
< % список (контакты, функция (контакт) { %>
<li < %= (el)-> el.data ('contact', contact) %>>
<%== can.view.render ('views/contactview.ejs', {
Контакт: контакт, категории: категории
}) %>
</li>
< %}) %>
</ul>
ContactLists.ejs составит список контактов. Давайте проанализируем этот шаблон:
Кода -копия выглядит следующим образом:
< % список (контакты, функция (контакт) { %>
Если метод обратного вызова в методе List () используется в сочетании с списком с наблюдателем, он будет вызываться многократно с использованием динамического привязки после изменения данных списка.
Кода -копия выглядит следующим образом:
<li < %= (el)-> el.data ('contact', contact) %>>
Приведенный выше код генерирует <li> с контактными данными с помощью метода обратного вызова элемента. После того, как метод после выполнения стрелки данные объекта EL устанавливаются на соответствующий элемент.
Кода -копия выглядит следующим образом:
<%== can.view.render ('views/contactview.ejs', {
Контакт: контакт, категории: категории
}) %>
Приведенный выше код превращает суб-обратный контакт. can.view.render () возвращает HTML с шаблоном и данными в качестве параметров.
Сделать один контакт
Подразделения-это хороший способ организовать виды в управляемые блоки. Это также делает ваши шаблоны простыми и легкими в повторном использовании. Этот шаблон будет использоваться позже в учебном пособии для создания контакта, сохраните следующий код в качестве contactview.ejs и введите папку представлений:
Кода -копия выглядит следующим образом:
<a href = "javascript: //"> <i> </i> </a>
<форма>
<div>
<div>
<img src = "img/contact.png">
</div>
<div>
<input type = "text" name = "name" placeholder = "Добавить имя"
<%= contact.attr ('name')? "value = '" + contact.name + "" ":" class =' empty '" %>>
<select name = "Категория">
< % $.
<option value = "<%= category.data%>" <%= contact.category === Category.data? "Selected": "" %>>
< %= категория. name %>
</option>
< %}) %>
</select>
</div>
<div>
<babel> Адрес </label>
<input type = "text" name = "адрес"
<%= contact.attr ('адрес')? "value = '" + contact.address + "" ":" class =' ulw '" %>>
<babel> Телефон </label>
<input type = "text" name = "Телефон"
<%= contact.attr ('телефон')? "value = '" + contact.phone + "" ":" class =' ulw '" %>>
<BABEL> Электронная почта </label>
<input type = "text" name = "Электронная почта"
<%= contact.attr ('email')? "value = '" + contact.email + "" ":" class =' ulw '" %>>
</div>
</div>
</form>
Атрибуты контакта размещаются в теге <pint>, который позволяет редактировать и обновлять информацию пользователя.
Revitalize Your Like (хорошая литература ..)
Если ATTR () используется во время шаблона обработки EJS, код вокруг него будет передаваться процессору события для мониторинга изменений в соответствующих атрибутах. Когда атрибуты изменятся, связанный пользовательский интерфейс в приложении будет обновлен. Эта функция выигрывает от механизма динамического связывания шаблона. Динамическое связывание EJS селективное и будет включено только для соответствующих атрибутов, когда используется attr ().
Мы используем тег <pint> в contactview.ejs, чтобы понять его использование:
Кода -копия выглядит следующим образом:
<input type = "text" name = "name" placeholder = "Добавить имя"
<%= contact.attr ('name')? "value = '" + contact.name + "" ":" class =' empty '" %>>
Код в специальном теге будет преобразован в событие и связан с атрибутом имени этого контакта. При изменении атрибута имени событие будет запускается, а структура HTML будет обновлена.
Использовать can.control для обработки бизнес -логики
Can.control создает организованный, внутренне без утечки, полный контроль, который можно использовать для создания виджетов или управления бизнес-логикой. Вы создаете экземпляр управления для элемента DOM с помощью необходимых данных, и вы можете определить события привязки метода в вашем управлении.
Когда элемент, связанный с элементом управления, удаляется из DOM, элемент управления разрушит себя и очистит связанный метод.
Чтобы создать элемент управления, наследуйте, передавая определенный вами объект, содержащий функцию CAN.Control (). Следующий инцидент также сообщил.
Каждый экземпляр управления имеет несколько важных значений и спецификаций методов:
Ссылки на этот экземпляр управления
Элемент DOM, который вы создали в этом экземпляре.
This.Options Parameter объекты, необходимые для создания экземпляра
init () вызывается, когда экземпляр успешно создается
Управлять контактами
Добавьте следующий фрагмент кода в файл contacts.js, чтобы создать элемент управления для управления контактами:
Кода -копия выглядит следующим образом:
Контакты = can.control ({
init: function () {
this.element.html (can.view ('views/contactslist.ejs', {
Контакты: this.options.contacts,
Категории: this.options.categories
}));
}
})
Когда создается экземпляр контактов, init () делает две вещи:
Используйте can.view () для рендеринга контактов. can.view () получает два параметра: файл, содержащий шаблоны и данные или тег полоса; Он возвращает документ -фрагмент (легкий контейнер, который управляет элементами DOM).
Используйте jQuery.html (), чтобы вставить документ, фрагмент can.view () в элемент управления
Используйте модель для представления данных
Модель - это абстрактный уровень данных приложений. В этом приложении используются две модели: одна соответствует контактному человеку, а другая соответствует категории. Добавьте следующий код в контакты.
Кода -копия выглядит следующим образом:
Contact = can.model ({
Findall: 'Get /Contacts',
Создать: "post /contacts",
Обновление: "put /contacts /{id}",
Уничтожить: "Удалить /контакты /{id}"
}, {});
Категория = can.model ({
Findall: «Получить /категории»
}, {});
Модель имеет 5 методов, которые могут определить данные CRUD, а именно FINDALL, FINDONE, создавать, обновлять и уничтожить. Вы можете переписать эти методы, но лучший способ - использовать службу остальных (репрезентативная передача состояний). Как и приведенный выше код, вы можете беспокоиться об игнорировании статических методов, которые не будут использоваться в приложении.
Здесь важно отметить, что экземпляр модели на самом деле «наблюдается» от Canjs. Can.Observe обеспечивает структуру наблюдателя объекта Can.Observe.List обеспечивает схему наблюдения массива. Это означает, что вы можете получить и установить данные через ATTR (), прослушивая изменения в данных.
Метод findall () возвращает модель. Список, который является событием, запускаемое can.observe.list при добавлении или удалении элемента.
Используйте приспособление, чтобы подражать отдыху
Приспособление перехватывает AJAX запрашивает и имитирует ответ с помощью файлов или методов. Это очень полезно для тестирования, или когда бэкэнд не готов. Приспособление - это то, что модель приложения имитирует отдых.
Во -первых, вам нужно подготовить некоторые данные для приспособления и добавить следующий код в:
Кода -копия выглядит следующим образом:
var contacts = [
{
ID: 1,
Имя: 'Уильям',
Адрес: «1 канджс»,
Электронная почта: '[email protected]',
Телефон: '0123456789',
Категория: 'коллеги'
},
{
ID: 2,
Имя: 'Laura',
Адрес: «1 канджс»,
Электронная почта: '[email protected]',
Телефон: '0123456789',
Категория: «Друзья»
},
{
ID: 3,
Имя: 'Lee',
Адрес: «1 канджс»,
Электронная почта: '[email protected]',
Телефон: '0123456789',
Категория: «Семья»
}
];
var Categories = [
{
ID: 1,
Название: «Семья»,
Данные: «Семья»
},
{
ID: 2,
Имя: «Друзья»,
Данные: «Друзья»
},
{
ID: 3,
Название: «Сотрудники»,
Данные: 'коллеги'
}
];
С данными, подключите его к приспособлению для моделирования отдыха. can.fixture () получает два параметра. URL, который мы хотим перехватить, и файлы и методы, на которые мы отвечаем. Обычно URL -адреса, которые вы хотите перехватить, динамичны и следуют шаблону. Просто добавьте подстановочные знаки, заключенные в {} в URL.
Добавьте следующий код в контакты.
Кода -копия выглядит следующим образом:
can.fixture ('get /contacts', function () {
вернуть [контакты];
});
var id = 4;
can.fixture ("post /contacts", function () {
return {id: (id ++)}
});
can.fixture ("put /contacts /{id}", function () {
возвращаться {};
});
can.fixture ("delete /contacts /{id}", function () {
возвращаться {};
});
can.fixture ('get /categories', function () {
вернуть [категории];
});
Первые четыре светильника имитируют получение, публикация, поместите и удаляют ответы контактной модели, а пятая имитирует реакцию GET категории модели.
Запустить приложение
В вашем приложении есть модель, которая управляет данными, отображает представления контактов и организует все это в контроль. Все, что вам нужно сделать сейчас, это запустить приложение. Теперь вам нужно начать приложение!
Добавьте следующий код в контакты.
Кода -копия выглядит следующим образом:
$ (document) .ready (function () {
$.
function (CategoryResponse, Contactresponse) {
var Categories = CategoryResponse [0],
Контакты = Contactresponse [0];
новые контакты ('#контакты', {
Контакты: контакты,
Категории: категории:
});
});
});
Давайте проанализируем этот код:
Кода -копия выглядит следующим образом:
$ (document) .ready (function () {
Используйте метод jQuery.ready, чтобы прослушать готовые от DOM.
Кода -копия выглядит следующим образом:
$.
function (CategoryResponse, Contactresponse) {
Вызовите метод Findall () двух моделей, чтобы получить типы всех контактов. Поскольку findall () имеет задержку, $.
Кода -копия выглядит следующим образом:
var Categories = CategoryResponse [0],
Контакты = Contactresponse [0];
Получите набор данных соответствующего экземпляра модели из двух методов Findall (). является первым элементом массива, возвращенного ответом.
Кода -копия выглядит следующим образом:
новые контакты ('#контакты', {
Контакты: контакты,
Категории: категории:
});
Создает контроль контакта для элемента #Contacts. Наборы данных контакта и типа отправляются на управление.
Откройте свое приложение с помощью браузера, и вы увидите следующий список контактов:
Суммировать
Это первая глава в серии учебных пособий, и вы уже узнали о ядре Canjs:
Модели абстракции уровня данных вашего приложения
Шаблоны просмотров, которые преобразуют данные в HTML
Управляющие организациями связаны со всем