Мінімальний посібник швидкого старту Майка Грассотті
Цей посібник із швидкого запуску повинен отримати вас від нуля до трохи більше нуля за пару хвилин. Закінчивши, ви повинні відчувати себе деякою впевненістю, що ember.js насправді працює, і, сподіваємось, вам буде достатньо цікаво дізнатися більше.
ПОПЕРЕДЖЕННЯ: Не спробуйте лише цей посібник, тоді подумайте, що вугілля відсмоктує причину "Я можу написати цей швидкий путівник краще в jQuery або Fortran" або будь-що інше. Я не намагаюся продати вас на вугіллі чи що-небудь інше, цей посібник є трохи більше, ніж привіт-світ.
Крок 0 - Перевірте jsFiddle
цей jsFiddle має весь код з цієї відповіді
Крок 1 - Включіть ember.js та інші необхідні бібліотеки
Для Ember.js потрібні як jQuery, так і рулі. Переконайтеся, що ці бібліотеки завантажені перед ember.js:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
Крок 2 - Опишіть користувальницький інтерфейс програми, використовуючи один або кілька шаблонів рульової панелі
За замовчуванням ember замінить тіло вашої html-сторінки, використовуючи вміст одного або декількох шаблонів рульових панелей. Колись ці шаблони будуть в окремих .hbs-файлах, зібраних зірочками або, можливо, grunt.js. Зараз ми збережемо все в одному файлі та використовуватимемо теги скриптів.
Спочатку додамо один applicationшаблон:
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
</div>
</script>
Крок 3 - Ініціалізуйте заявку на вугілля
Просто додайте ще один блок скриптів, App = Ember.Application.create({});щоб завантажити ember.js та ініціалізувати свою програму.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
Це все, що вам потрібно для створення базового додатка з вугіллям, але це не дуже цікаво.
Крок 4: Додайте контролер
Ембер оцінює всі шаблони рульових елементів у контексті контролера. Отже, applicationшаблон має відповідність ApplicationController. Ember створюється автоматично, якщо ви не визначите його, але тут давайте налаштуємо його, щоб додати властивість повідомлення.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Крок 5: Визначте маршрути + більше контролерів та шаблонів
Маршрутизатор Ember дозволяє легко комбінувати шаблони / контролери в програму.
<script type='text/javascript'>
App.Router.map(function() {
this.route("index", { path: "/" });
this.route("list", { path: "/list" });
});
App.IndexController = Ember.Controller.extend({
message: 'Hello! See how index.hbs is evaluated in the context of IndexController'
});
App.ListRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
}
});
</script>
Щоб зробити цю роботу, ми змінюємо наш шаблон програми, додаючи {{outlet}}помічник. Маршрутизатор Ember виведе відповідний шаблон у розетку залежно від маршруту користувача. Ми також використовуватимемо {{linkTo}}помічник для додавання навігаційних посилань.
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
<div class="row">
{{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
{{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
</div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="list">
<h3 class="demo-panel-title">This is the list template</h3>
<ul>
{{#each item in content}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h3 class="demo-panel-title">This is the index template</h3>
<p>{{message}}</p>
</script>
Готово!
Робочий приклад цієї програми доступний тут .
Ви можете використовувати цю jsFiddle як вихідну точку для власних програм з янтар
Наступні кроки...
Для довідки, моя оригінальна відповідь:
Моє запитання до будь-якого експерта Ember.js, і, звичайно, відповідних авторів підручника: Коли я повинен використовувати шаблони дизайну з одного підручника, а коли з іншого?
Ці два навчальні посібники представляють найкращі практики на час їх написання. Напевно, є щось, що можна дізнатися у кожного, і те, на жаль, приречене застаріти, оскільки ember.js рухається дуже швидко. З двох, Трек набагато актуальніший.
Які компоненти кожного з них є особистими вподобаннями, а які компоненти стануть важливими в міру дозрівання мого додатка? Якщо ви розробляєте нову програму Ember, я б не рекомендував дотримуватися підходу Code Lab. Це просто занадто застаріло, щоб бути корисним.
У дизайні Code Lab Ембер, здається, наближається до існуючої в додатку (хоча це 100% його звичайного JS), тоді як додаток Трека, здається, живе більше в Ембер.
Ваш коментар баг-он. CodeLab використовує переваги основних компонентів вугілля та отримує доступ до них з глобальної сфери. Коли це було написано (9 місяців тому), це було досить поширеним явищем, але сьогодні найкраща практика написання програм із вугрів набагато ближче до того, що робив Трек.
Однак, навіть підручник Трека стає застарілим. Компоненти, які були потрібні ApplicationViewі ApplicationControllerтепер генеруються самими рамками.
На сьогоднішній день самим актуальним ресурсом є набір посібників, опублікований на веб-сайті http://emberjs.com/guides/
- вони були написані з нуля протягом останніх тижнів і відображають останню (перед випуском) версію ember.
Я б також ознайомився з проектом для перегляду треків тут: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniaries
Редагувати :
@ sly7_7: Я також наведу інший приклад, використовуючи дані ember https://github.com/dgeb/ember_data_example