В наши дни сложные Javascript-приложения можно увидеть повсюду. Со временем они становятся все сложнее и уже неприемлемо просто писать цепочку callback-функций на jQuery. Javascript-программисты постепенно узнают то, что обычные разработчики знали уже несколько десятилетий. Организация и эффективность может сыграть важную роль при разработке. Таким образом, такие MVC-фреймворки на Javascript, как Backbone, Knockout и Ember появились для того, чтобы заполнить пустоту между начинающими, средними и опытными разработчиками. Они предлагают разные возможности и функционал, который подойдет разным людям, в зависимости от их потребностей.
Я считаю себе довольно хорошим разработчиком… далеко не лучшим, но я умею работать с существующими технологиями, которые применяю в своих разработках. Я следил за этими фреймворками и мне подошли Backbone и Ember. Я игрался с Backbone, даже купил видео-учебник по нему. Он хороший, но мне до сих пор трудно заставить себя мыслить как он. Я услышал об Ember всего несколько месяцев назад и он все набирает обороты. Он предлагает множество функций, которые мне нужны и я решил посмотреть, насколько он мне подходит. Ember предоставляет несколько ключевых фич, которые мне кажутся очень привлекательными, главной из которых является привязка данных. Вы просто создаете переменную, и, когда значение этой переменной изменяется, обновляется любая часть вашего приложения, которая следит за этой переменной. Это нашло бы свое применение, например, в чатах и т. д.
На данный момент главный недостаток Ember по сравнению с Backbone в том, что у последнего есть множество учебников, статей и готовых проектов на Github. В то время, как по Ember вы можете найти совсем немного материалов в сети, которые сразу показывают все его внутренности, но упускают самые основы. Так что моя цель – написать туториал, который поможет начать вам использовать Ember уже сейчас. Ну и кроме всего прочего я пишу эту статью, чтобы закрепить свои собственные знания.
Ember.js построен на архитектуре MVC (Model-View-Controller) и вы просто должны разделять свой код на 3 части:
- M = Модель – похожа на массив. Здесь хранятся данные, которые будут использоваться вашим приложением.
- V = Представление – это визуальная часть вашего приложения — формы, списки и т. д.
- C = Контроллер – думайте о контроллере, как о регулировщике движения. Он управляет взаимодействием между другими частями приложения. Когда пользователь нажимает на кнопку, контроллер определяет, какое представление должно быть загружено, которое в свою очередь определяет, какую модель использовать для сохранения данных.
Ну что, начнем? Для начала скачайте Ember.js Starter Kit. Распакуйте его в директорию, у которой есть доступ с веб-браузера. Откройте index.html и js/app.js в вашем любимом текстовом редакторе. В app.js добавьте следующую строку:
Welcome = Ember.Application.create();
Поздравляю! Вы создали свое первое приложение на Ember! Откройте index.html в вашем браузере и придите в восторг от вашего нового сайта. Ой, постойте, там же ничего нет… что вы думаете по этом поводу? Ничего не появилось кроме заголовка и это прекрасно. Все что произошло – это то, что Ember создал приложение, которое вы будете использовать на протяжении всего урока. Некоторые разработчики предпочитают называть это пространством имен. Это просто означает, что все другие части вашего приложения будут начинаться с имени, которое вы выбрали. Это помогает избежать конфликта имен переменных и держит все в порядке.
Есть одна вещь, к которой большинство jQuery-разработчиков очень привыкли – старый добрый document.ready. Ember предлагает нечто подобное, принимая необязательный объект в метод create. Добавьте код, перезагрузите страницу и вы должны увидеть поздравление. Погладьте себя по голове… вы это заслужили!
Welcome = Ember.Application.create({
ready: function(){
alert('Вы сделали это!');
}
});
Следующее, что нам нужно сделать – это добавить Модель. Каждое приложение на Ember может иметь множество моделей и каждая из них – это уникальный тип данных. В некоторых фреймворках модель представляется в виде класса. В общем, это просто структура, которая говорит нам, как работать с этим объектом. Давайте создадим модель для некоторых из моих любимых книг.
Welcome.Book = Ember.Object.extend({
title: null,
author: null,
genre: null
});
Следующее, что нам нужно – это контроллер. Кстати, кроме управления приложением, контроллеры в Ember так же передают данные из модели в представление. Вот простой контроллер на Ember:
Welcome.booksController = Ember.ArrayController.create();
Несовсем похоже на создание контроллера, но здесь создается ArrayController, который содержит массив. Именно здесь будет сохраняться информация о наших книгах. Она там, вы просто не видите ее. Вы можете явно указать содержимое массива, или, например, заполнить его. Это осуществляется путем передачи необязательного объекта метод create:
Welcome.booksController = Ember.ArrayController.create({
content: []
});
Теперь у нас есть модель и контроллер – осталось только написать представление. Помните, я говорил, что представление – визуальная часть вашего приложения? Значит это будет находится в файле index.html. Давайте сначала напишем наше представление, а потом обсудим его. Прямо под тег H1 добавьте следующее:
<script type="text/x-handlebars">
{{#view Ember.Button target="Welcome.booksController" action="loadBooks"}}
Load Books
{{/view}}
{{#collection contentBinding="Welcome.booksController" tagName="ul"}}
<b>{{content.title}}</b> - {{content.author}}, <i>{{content.genre}}</i>
{{/collection}}
</script>
Одна из замечательных особенностей Ember – это то, что он поставляется с встроенным шаблонизатором Handlebars. По сути шаблоны являются ключевой магией Ember. Обычно в шаблонах вы окружаете переменную какой-то строкой. В Handlebars это 2 фигурные скобки.
Ember начал свое существование как билиотека SproutCore, разработанная в Apple, как ядро для их онлайн-приложений, таких как Mobile Me. SproutCore также включал в себя набор виджетов, которых нет в Ember. Ember включает в себя только предоставления для элементов форм, потому что они могут быть очень динамичными. В случае нашего шаблона, или представления, мы используем кнопки Ember. Это позволяет ему сделать всю тяжелую работу за нас. Он принимает цель (в нашем случае – booksController) и дейстие. Поэтому, когда кто-то нажимает на кнопку, Ember будет работать с методом loadBooks объекта Welcome.booksController.
Вторая часть немного сложнее, но я уверен, что вы разберетесь. В Ember коллекция – это просто указатель на группу данных, в нашем случае это опять Welcome.booksController. В начале статьи я писал, что связанные данные – одна из причин, по которой Ember меня заинтересовал. И здесь мы можем увидеть всю его мощь. Content просто указывает на переменную content в booksController, в то время, как Binding является той самой волшебной пылью. Добавление Binding к концу большинства атрибутов говорит Ember о том, что вы хотите сделать двустороннее связывание. Вы изменяете значение на одной стороне, а другая будет обновляться. Наконец, коллекции позволяют установить базовый тег, в нашем случае это просто маркированный список (тег UL).
Кстати, символы # и / говорят Handlebars о том, что это только часть (блок) представления.
Внутри коллекции находится “мясо” наших шаблонов. Обратите внимание, как мы смешиваем HTML и теги внутри наших шаблонов. Удобно, не правда ли? Друга тонкость состоит в том, что Ember не нуждается в явном указании открывающих или закрывающих тегов для списка. Он добавит их автоматически, потому что знает, что мы используем маркированный список. Запустите приложение и вы увидите одинокую кнопку, которой нужны друзья. Нажатие кнопки делает ее несчастной, т. к. у нас еще нет метода loadBooks. Как насчет того, чтобы добавить его и загрузить немного данных?
Welcome.booksController = Ember.ArrayController.create({
content: [],
loadBooks: function(){
var self = this;
$.getJSON('data/books.json', function(data) {
data.forEach(function(item){
self.pushObject(Welcome.Book.create(item));
});
});
}
});
Помните, мы говорили, что модели могут содержать произвольные методы? Все в Ember может содержать произвольный код, в том числе и ArrayController. Теперь, когда вы загрузите свою страницу и нажмете кнопку “Load Books” — будет вызван метод loadBooks, который загрузит некоторые из моих любимых книг. Вот и все для этого простого примера. Я надеюсь, что вам понравилось и вы дадите Ember шанс. Вы можете скачать исходный код примера на Github.
Подождите еще минутку. Если вы похожи на меня, то у вас остались вопросы. Много вопросов. Я написал эту статью потому, что были вопросы и у меня ушли часы на поиск ответов. На самом деле ответы на большинство вопросов, которые у меня были освещены в этой статье. Если у вас еще остались вопросы, то вы можете написать их здесь. Если я не знаю ответа, то я его найду и отвечу вам.
Советую вам прочитать мою вторую статью, в которой Ember освещен намного подробнее.
Автор: ad3w
