RusAlex/Beginners.Guide.To.Ember.js.txt

## app.js
Songs = Ember.Application.create({
    mixmaster: 'Andy',
    totalReviews: 0,
    ready: function(){
        //alert('Ember sings helloooooooooo!');
    }
});

Songs.Song = Ember.Object.extend({
    title: null,
    artist: null,
    genre: null,
    listens: 0
});

Songs.ReviewTextArea = Ember.TextArea.extend({
    placeholder: 'Enter your review'
});

Songs.songsController = Ember.ArrayController.create({
    content: [],
    init: function(){
        // create an instance of the Song model
        var song = Songs.Song.create({
            title: 'Son of the Morning',
            artist: 'Oh, Sleeper',
            genre: 'Screamo'
        });
        this.pushObject(song);
    }
});

## Beginners.Guide.To.Ember.js.txt
пер.
http://www.adobe.com/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html

В наше время сложные JavaScript приложения уже везде. Эти приложения растут с каждым
днем, они уже не являются длинными цепочками jQuery колбэков и даже отдельными
фц-иями, вызываемыми в разных местах приложения. Теперь JavaScript разработчикам
требуется изучасть вещи, десятилетиями известные программистам desctop софта:
организация и эффекстивность работы.

[опустил многословное описание MVC паттерна]

Как часть последней тендеции развития web-based софта, появляется все большее
число JavaScript фреймворков: ember.js, backbone.js, knockout.js, spine.js,
batman.js, angular.js и т.д. Написанные на JavaScript и спроектированные для
JavaScript разработки, эти библиотеки заполнили пустоту между начинающими и
средними разработчиками с одной стороны и мастерами своего дела с другой.  Они
предлагают многообразие функциональности, помогающие объединить усилия
разработчиков разного уровня в одном проекте.

В этой статье вы познакомитесь с основами ember.js и построите первое
приложение.

Введение в Ember.js

Ember.js это один из самых новых фреймворков в группе JavaScript фреймворков. Он
эволюционировал из проекта под названием STroutCore, изначально созданном в
2007г. компанией Apple и использованным ими для множества веб проектов, включая
MobileMe. На сайте emberjs.com Ember описывается как "JavaScript фреймворк для
создания быстрых веб-приложений, который ломает стереотипы и предоставляет
стандартную структуру веб приложениям". Он идет в тесной связке с шаблонизатором
Handlebars, который добавляет в ember одну из важнейших его особенностей:
двусторонняя связь данных. У ember есть также несколько других особенностей:
таких как "управление состояниями", например. Ember уже можнный конкурент на
арене, после стольких лет дорогостоящей разработки.

Ember имеет только одну звисимость - это jQuery. Начальный html для приложения
на Ember может выглядеть как код ниже. Заметим, что jQuery  и Ember бурется из
CDN. Это ускоряет загрузку страницы для пользователей, если они уже посещали
сайты с этими библиотеками.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.6.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
</body>
</html>

[опустил еще немного об MVC]

Как ember реализует mvc.

JavaScript это гибкий и мощный язык, но также со своими недостатками. Из оробки
он не предлагает функциональность, которая годится для MVC разработки. Так ember
расширяет основной язык для этого. Когда вы строите своё ember приложение, вы
работаете с четырьмя главными частями: Application, Model, View и Controller.
Следующие разделы рассматривают эти части ближе.

Application

Каждое ember приложение требует экземпляр Ember.Application. Это основа для
всего вашего остального кода и он предоставляет вам полезный функционал,
например, namespaces(вид группировки остальных частей в вашем приложении).
Создание Ember приложения:

Songs = Ember.Application.create({
    mixmaster: 'Andy'
})

Этот код создает приложение с именем Songs со свойством mixmaster установленным
в значение "Andy". Вы можете назвать ваше приложение как вам понравится, но
Ember требует, чтобы имяначиналось с заглавной буквы. Вы также можете
определить дополнительные встроенные опции и можете добавить произвольное
свойство или метод, но главное, о чем должен позаботиться новичок в ember - это
ready() метод. Он работает также как jQuery document.ready(), вот пример:

Songs = Ember.Application.create({
    mixmaster: 'Andy',
    totalReviews: 0,
    ready: function(){
        alert('Ember sings helloooooooooo!');
    }
})

Модели

Приложение без данных - ничто. Ember помогает разработчикам управлять их
данными в виде моделей. А также хранить эти данные, модели в Ember это и данные
внутри них. Другими словами, если вы хотите хранить информацию о вашей MP3
коллекции, ваша модель должна содержать свойство title, articst, genre и т.д.
Пример такой модели:

Songs.Song = Ember.Object.extend({
    title: null,
    artist: null,
    genre: null,
    listens: 0
});

Несколько уточнений по коду
* сразу вы видите использование namespace вашего приложения. Songs это имя
приложения и Song это имя модели.
* когда расширяете объект - вы создаете базовый объект для всех ваших будущих
экземпляров модель. т.к. это главный объект, все песни будут основаны на нем и
он начинается с заглавной буквы. Не забывайте об этом, это упростит вам работу.
* При создании модели вы устанавливаете значения по умолчанию: title, artist,
genre, очевидно будут заполняться позже, и установлены в null. Listens
установлен в 0 и это значение будет увеличиваться по мере увеличения
прослушиваний.

Теперь Song модель созлдана и мы можем добавить нашу первую песню. Вы
использовали extend лоя инициализации модели Song, но вы будете использовать
метод create для добавления нового экземпляра. Выглядит примерно так:

mySong = Song.create({
    title: 'Son of the Morning',
    artist: 'Oh, Sleeper',
    genre: 'Screamo'
});

Примечательно, что мы не используем заглавную букву в названии переменной,
потому что это экземпляр Song модели. Новая песня также не внутри Songs
namespace. Вы почти никогда не будете создавать экземпляр модели внутри
приложения. Вы легко можете это делать, но в основном вы будете работать с
большой коллекцией похожих объектов, такой как ArrayController.

Views - вьюшки

В ember приложении или другом MVC приложении вьюшка - это что-то, что
пользователь может просматривать и с чем может взаимодействовать. Вы описываете
шаблон непосредственно на странице HTML кодом. Этот шаблон будет содержаться
внутри тэга <script>.

<script type="text/x-handlebars">
    Hello <b>{{Songs.mixmaster}}</b>
</script>

Заметьте, что у тэга script есть атрибут type, установленный в
text/x-handlebars. Это дает указание ember работать с ним как с шаблоном, при
загрузке страницы. Любой html содержащийся внутри этого тэга автоматически
подготавливается ember для использования в приложении. Если вы поместите эти
строки в код вашего html файла, вы получите примерно такой вывод:

Hello <b>Andy</b>

Прежде чем продолжить, давайте посмотрим внутрь страницы. Код html который был
сгенерирован приложением будет иметь несколько дополнительной информации. Это
будут маркеры, которые handlebars использует для определения мест, где размещены
свойства модели. Например:

<b>
    <script id="metamorph-0-start" type="text/x-placeholder"></script>
    Andy
    <script id="metamorph-0-end" type="text/x-placeholder"></script>
</b>

Вы можете обозначить view прямо через JavaScript код и затем вывести это на
странице, используя view helper. В ember есть общий view, который создает
простой div вашем приложении, а также есть и набор view для вывода простых
управляющих элементов: текстовые поля, чекбоксы и selectы. Вы начинаете с
создания TextArea view внутри вашего JavaScript файла.

Songs.ReviewTextArea = Ember.TextArea.extend({
    placeholder: 'Enter your review'
})

Затем показываете его на странице, с помощью указания переменной, содержащей
этот view. Запуск следующего кода в браузере выведет TextArea поле с надписью
"Enter your review". Вы также можете указать rows и cols, как свойства в
определении.

<script type="text/x-handlebars">
    {{view Songs.ReviewTextArea}}
</script>

Handlebars

Сейчас вы возможно спросите, что это за такие {{ }} в коде, как раз самое время
и рассказать про Handlebars, также известными как mustaches. Поверните вашу
голову горизонтально, и вы поймете, почему они так называются. Handlebars это
движок шаблонизатор, который позволяет разработчикам смешивать html и handlebars
выражения, выдавать в результате html. Выражения начинаются с {{ и заканчиваются
}}. Как мы рассказали ранее, все шаблоны должны быть в теге script с типом
text/x-handlebars.

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

<script type="text/x-handlebars">
    My songs have {{Songs.totalReviews}} reviews.
</script>

Когда ваше приложение впервые инициируется, пользователь увидит следующий текст:
My songs have 0 reviews.

Но через магические связи данных, это значение может изменяться и оно будет
изменяться, как только будут появляться новые обзоры, обновится и
Songs.totalReviews .

Handlebars также поддерживают управление выполнения кода, через использование
{{#if}} и {{#else}} . Эти элементы дают вам возможность использовать условия в
ваших шаблонах. Вы можете изменить предыдущий пример, с отображением
альтернативного сообщения, когда нет ни одного обзора для песни:

<script type="text/x-handlebars">
    {{#if Songs.totalReviews}}
        Read all my reviews!
    {{else}}
        There are no reviews right now.
    {{/if}}
</script>

Если на протяжении жизни приложения, значение Songs.totalReviews изменится. вид также изменится на соответствующее сообщение.

Controllers

Раньше модель служила средством разработчика для управления данными. Это
правда только в очень узком понимани. Модель - содержит данные только об одном
единственном экземпляре, например о песне, но не обо всех песнях или о человеке,
но не о людях. Когда вы хотите управлять множеством единиц одного вида, приходит
на помощь контроллер. В ember вы можете использовать ArrayController для
управления множествами: песни, люди, виджеты, что угодно. В каждый
ArrayController встроено свойство content, которое исподьзуется для хранения
массива данных. Этими данными могут быть простые строки или сложные значения:
массивы или объекты. Дополнительно, ArrayController может содержать ф-ции,
которые используются для действия над его данными. Может быть ArrayController
для песен будет выглядеть так?

Songs.songsController = Ember.ArrayController.create({
    content: [],
    init: function(){
        // create an instance of the Song model
        var song = Songs.Song.create({
            title: 'Son of the Morning',
            artist: 'Oh, Sleeper',
            genre: 'Screamo'
        });
        this.pushObject(song);
    }
});

Функция init не обязательная, но очень полезна, она выполняется, когда
songsController готов к работе. У нас она могла бы использоваться для заполнения
контроллера начальными данными, добавляется первая песня. Добавите предыдущий
контроллер и шаблон ниже в ваше приложение и запустите его в браузере.

<script type="text/x-handlebars">
    {{#each Songs.songsController}}
        <h3>{{title}}</h3>
        <p>{{artist}} - {{genre}}</p>
    {{/each}}
</script>

Хелпер each получает путь к данным и затем проходится по ним циклом. Все что
внутри блока each будет отображено для каждой песни в контроллере.
Примечательно, что вы не указываете путь к св-ву content в контроллере.
Поскольку ember уже рассматривает контроллер как массив. Итоговый html будет
примерно такой:

<h3>Son of the Morning</h3>
<p>Oh, Sleeper - Screamo</p>

## index.html
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.6.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
<script type="text/x-handlebars">
    Hello <b>{{Songs.mixmaster}}</b>
</script>
<script type="text/x-handlebars">
    {{#each Songs.songsController}}
        <h3>{{title}}</h3>
        <p>{{artist}} - {{genre}}</p>
    {{/each}}
</script>
<script type="text/x-handlebars">
    {{#if Songs.totalReviews}}
        Read all my reviews!
    {{else}}
        There are no reviews right now.
    {{/if}}
</script>
<script type="text/x-handlebars">
    {{view Songs.ReviewTextArea}}
</script>

</body>
</html>
	Songs = Ember.Application.create({
	mixmaster: 'Andy',
	totalReviews: 0,
	ready: function(){
	//alert('Ember sings helloooooooooo!');
	}
	});

	Songs.Song = Ember.Object.extend({
	title: null,
	artist: null,
	genre: null,
	listens: 0
	});

	Songs.ReviewTextArea = Ember.TextArea.extend({
	placeholder: 'Enter your review'
	});

	Songs.songsController = Ember.ArrayController.create({
	content: [],
	init: function(){
	// create an instance of the Song model
	var song = Songs.Song.create({
	title: 'Son of the Morning',
	artist: 'Oh, Sleeper',
	genre: 'Screamo'
	});
	this.pushObject(song);
	}
	});
	пер.
	http://www.adobe.com/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html

	В наше время сложные JavaScript приложения уже везде. Эти приложения растут с каждым
	днем, они уже не являются длинными цепочками jQuery колбэков и даже отдельными
	фц-иями, вызываемыми в разных местах приложения. Теперь JavaScript разработчикам
	требуется изучасть вещи, десятилетиями известные программистам desctop софта:
	организация и эффекстивность работы.

	[опустил многословное описание MVC паттерна]

	Как часть последней тендеции развития web-based софта, появляется все большее
	число JavaScript фреймворков: ember.js, backbone.js, knockout.js, spine.js,
	batman.js, angular.js и т.д. Написанные на JavaScript и спроектированные для
	JavaScript разработки, эти библиотеки заполнили пустоту между начинающими и
	средними разработчиками с одной стороны и мастерами своего дела с другой. Они
	предлагают многообразие функциональности, помогающие объединить усилия
	разработчиков разного уровня в одном проекте.

	В этой статье вы познакомитесь с основами ember.js и построите первое
	приложение.

	Введение в Ember.js

	Ember.js это один из самых новых фреймворков в группе JavaScript фреймворков. Он
	эволюционировал из проекта под названием STroutCore, изначально созданном в
	2007г. компанией Apple и использованным ими для множества веб проектов, включая
	MobileMe. На сайте emberjs.com Ember описывается как "JavaScript фреймворк для
	создания быстрых веб-приложений, который ломает стереотипы и предоставляет
	стандартную структуру веб приложениям". Он идет в тесной связке с шаблонизатором
	Handlebars, который добавляет в ember одну из важнейших его особенностей:
	двусторонняя связь данных. У ember есть также несколько других особенностей:
	таких как "управление состояниями", например. Ember уже можнный конкурент на
	арене, после стольких лет дорогостоящей разработки.

	Ember имеет только одну звисимость - это jQuery. Начальный html для приложения
	на Ember может выглядеть как код ниже. Заметим, что jQuery и Ember бурется из
	CDN. Это ускоряет загрузку страницы для пользователей, если они уже посещали
	сайты с этими библиотеками.

	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.6.min.js"></script>
	<script src="js/app.js"></script>
	</head>
	<body>
	</body>
	</html>

	[опустил еще немного об MVC]

	Как ember реализует mvc.

	JavaScript это гибкий и мощный язык, но также со своими недостатками. Из оробки
	он не предлагает функциональность, которая годится для MVC разработки. Так ember
	расширяет основной язык для этого. Когда вы строите своё ember приложение, вы
	работаете с четырьмя главными частями: Application, Model, View и Controller.
	Следующие разделы рассматривают эти части ближе.

	Application

	Каждое ember приложение требует экземпляр Ember.Application. Это основа для
	всего вашего остального кода и он предоставляет вам полезный функционал,
	например, namespaces(вид группировки остальных частей в вашем приложении).
	Создание Ember приложения:

	Songs = Ember.Application.create({
	mixmaster: 'Andy'
	})

	Этот код создает приложение с именем Songs со свойством mixmaster установленным
	в значение "Andy". Вы можете назвать ваше приложение как вам понравится, но
	Ember требует, чтобы имяначиналось с заглавной буквы. Вы также можете
	определить дополнительные встроенные опции и можете добавить произвольное
	свойство или метод, но главное, о чем должен позаботиться новичок в ember - это
	ready() метод. Он работает также как jQuery document.ready(), вот пример:

	Songs = Ember.Application.create({
	mixmaster: 'Andy',
	totalReviews: 0,
	ready: function(){
	alert('Ember sings helloooooooooo!');
	}
	})

	Модели

	Приложение без данных - ничто. Ember помогает разработчикам управлять их
	данными в виде моделей. А также хранить эти данные, модели в Ember это и данные
	внутри них. Другими словами, если вы хотите хранить информацию о вашей MP3
	коллекции, ваша модель должна содержать свойство title, articst, genre и т.д.
	Пример такой модели:

	Songs.Song = Ember.Object.extend({
	title: null,
	artist: null,
	genre: null,
	listens: 0
	});

	Несколько уточнений по коду
	* сразу вы видите использование namespace вашего приложения. Songs это имя
	приложения и Song это имя модели.
	* когда расширяете объект - вы создаете базовый объект для всех ваших будущих
	экземпляров модель. т.к. это главный объект, все песни будут основаны на нем и
	он начинается с заглавной буквы. Не забывайте об этом, это упростит вам работу.
	* При создании модели вы устанавливаете значения по умолчанию: title, artist,
	genre, очевидно будут заполняться позже, и установлены в null. Listens
	установлен в 0 и это значение будет увеличиваться по мере увеличения
	прослушиваний.

	Теперь Song модель созлдана и мы можем добавить нашу первую песню. Вы
	использовали extend лоя инициализации модели Song, но вы будете использовать
	метод create для добавления нового экземпляра. Выглядит примерно так:

	mySong = Song.create({
	title: 'Son of the Morning',
	artist: 'Oh, Sleeper',
	genre: 'Screamo'
	});

	Примечательно, что мы не используем заглавную букву в названии переменной,
	потому что это экземпляр Song модели. Новая песня также не внутри Songs
	namespace. Вы почти никогда не будете создавать экземпляр модели внутри
	приложения. Вы легко можете это делать, но в основном вы будете работать с
	большой коллекцией похожих объектов, такой как ArrayController.

	Views - вьюшки

	В ember приложении или другом MVC приложении вьюшка - это что-то, что
	пользователь может просматривать и с чем может взаимодействовать. Вы описываете
	шаблон непосредственно на странице HTML кодом. Этот шаблон будет содержаться
	внутри тэга <script>.

	<script type="text/x-handlebars">
	Hello <b>{{Songs.mixmaster}}</b>
	</script>

	Заметьте, что у тэга script есть атрибут type, установленный в
	text/x-handlebars. Это дает указание ember работать с ним как с шаблоном, при
	загрузке страницы. Любой html содержащийся внутри этого тэга автоматически
	подготавливается ember для использования в приложении. Если вы поместите эти
	строки в код вашего html файла, вы получите примерно такой вывод:

	Hello <b>Andy</b>

	Прежде чем продолжить, давайте посмотрим внутрь страницы. Код html который был
	сгенерирован приложением будет иметь несколько дополнительной информации. Это
	будут маркеры, которые handlebars использует для определения мест, где размещены
	свойства модели. Например:

	<b>
	<script id="metamorph-0-start" type="text/x-placeholder"></script>
	Andy
	<script id="metamorph-0-end" type="text/x-placeholder"></script>
	</b>

	Вы можете обозначить view прямо через JavaScript код и затем вывести это на
	странице, используя view helper. В ember есть общий view, который создает
	простой div вашем приложении, а также есть и набор view для вывода простых
	управляющих элементов: текстовые поля, чекбоксы и selectы. Вы начинаете с
	создания TextArea view внутри вашего JavaScript файла.

	Songs.ReviewTextArea = Ember.TextArea.extend({
	placeholder: 'Enter your review'
	})

	Затем показываете его на странице, с помощью указания переменной, содержащей
	этот view. Запуск следующего кода в браузере выведет TextArea поле с надписью
	"Enter your review". Вы также можете указать rows и cols, как свойства в
	определении.

	<script type="text/x-handlebars">
	{{view Songs.ReviewTextArea}}
	</script>

	Handlebars

	Сейчас вы возможно спросите, что это за такие {{ }} в коде, как раз самое время
	и рассказать про Handlebars, также известными как mustaches. Поверните вашу
	голову горизонтально, и вы поймете, почему они так называются. Handlebars это
	движок шаблонизатор, который позволяет разработчикам смешивать html и handlebars
	выражения, выдавать в результате html. Выражения начинаются с {{ и заканчиваются
	}}. Как мы рассказали ранее, все шаблоны должны быть в теге script с типом
	text/x-handlebars.

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

	<script type="text/x-handlebars">
	My songs have {{Songs.totalReviews}} reviews.
	</script>

	Когда ваше приложение впервые инициируется, пользователь увидит следующий текст:
	My songs have 0 reviews.

	Но через магические связи данных, это значение может изменяться и оно будет
	изменяться, как только будут появляться новые обзоры, обновится и
	Songs.totalReviews .

	Handlebars также поддерживают управление выполнения кода, через использование
	{{#if}} и {{#else}} . Эти элементы дают вам возможность использовать условия в
	ваших шаблонах. Вы можете изменить предыдущий пример, с отображением
	альтернативного сообщения, когда нет ни одного обзора для песни:

	<script type="text/x-handlebars">
	{{#if Songs.totalReviews}}
	Read all my reviews!
	{{else}}
	There are no reviews right now.
	{{/if}}
	</script>

	Если на протяжении жизни приложения, значение Songs.totalReviews изменится. вид также изменится на соответствующее сообщение.

	Controllers

	Раньше модель служила средством разработчика для управления данными. Это
	правда только в очень узком понимани. Модель - содержит данные только об одном
	единственном экземпляре, например о песне, но не обо всех песнях или о человеке,
	но не о людях. Когда вы хотите управлять множеством единиц одного вида, приходит
	на помощь контроллер. В ember вы можете использовать ArrayController для
	управления множествами: песни, люди, виджеты, что угодно. В каждый
	ArrayController встроено свойство content, которое исподьзуется для хранения
	массива данных. Этими данными могут быть простые строки или сложные значения:
	массивы или объекты. Дополнительно, ArrayController может содержать ф-ции,
	которые используются для действия над его данными. Может быть ArrayController
	для песен будет выглядеть так?

	Songs.songsController = Ember.ArrayController.create({
	content: [],
	init: function(){
	// create an instance of the Song model
	var song = Songs.Song.create({
	title: 'Son of the Morning',
	artist: 'Oh, Sleeper',
	genre: 'Screamo'
	});
	this.pushObject(song);
	}
	});

	Функция init не обязательная, но очень полезна, она выполняется, когда
	songsController готов к работе. У нас она могла бы использоваться для заполнения
	контроллера начальными данными, добавляется первая песня. Добавите предыдущий
	контроллер и шаблон ниже в ваше приложение и запустите его в браузере.

	<script type="text/x-handlebars">
	{{#each Songs.songsController}}
	<h3>{{title}}</h3>
	<p>{{artist}} - {{genre}}</p>
	{{/each}}
	</script>

	Хелпер each получает путь к данным и затем проходится по ним циклом. Все что
	внутри блока each будет отображено для каждой песни в контроллере.
	Примечательно, что вы не указываете путь к св-ву content в контроллере.
	Поскольку ember уже рассматривает контроллер как массив. Итоговый html будет
	примерно такой:

	<h3>Son of the Morning</h3>
	<p>Oh, Sleeper - Screamo</p>