Краткое руководство по минимальной жизнеспособности Ember.js Майка Грассотти
Это краткое руководство должно помочь вам с нуля до чуть больше нуля за пару минут. Когда закончите, вы должны быть уверены, что ember.js действительно работает, и, надеюсь, вам будет интересно узнать больше.
ПРЕДУПРЕЖДЕНИЕ: не просто попробуйте это руководство, а потом подумайте, что это отстой, потому что «Я мог бы лучше написать это краткое руководство на jQuery или Fortran» или что-то еще. Я не пытаюсь продать вам угольки или что-то в этом роде, это руководство - не более чем привет-мир.
Шаг 0 - Проверьте jsFiddle
этот jsFiddle имеет весь код из этого ответа
Шаг 1. Включите ember.js и другие необходимые библиотеки.
Ember.js требует как jQuery, так и Handlebars. Убедитесь, что эти библиотеки загружены до 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 - Инициализируйте приложение Ember
Просто добавьте еще один блок скрипта с, App = Ember.Application.create({});чтобы загрузить ember.js и инициализировать ваше приложение.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
Это все, что вам нужно для создания базового приложения ember, но это не очень интересно.
Шаг 4: Добавьте контроллер
Ember оценивает каждый шаблон руля в контексте контроллера. Итак, applicationшаблон имеет соответствие ApplicationController. Ember создает автоматически, если вы его не определяете, но давайте настроим его, чтобы добавить свойство сообщения.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Шаг 5. Определите маршруты + дополнительные контроллеры и шаблоны
Ember router упрощает объединение шаблонов / контроллеров в приложение.
<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.
Следующие шаги...
- Прочтите руководства Ember
- Может быть, купите скринкаст Peepcode
- Задавайте вопросы здесь, на Stack Overflow или в ember IRC
Для справки, мой первоначальный ответ:
У меня вопрос к любому эксперту по Ember.js и, конечно же, к авторам соответствующих учебников: когда мне следует использовать шаблоны проектирования из одного учебника, а когда - из другого?
Эти два руководства представляют лучшие практики на момент написания. Наверняка есть чему поучиться у каждого, оба, к сожалению, обречены на устаревание, потому что ember.js очень быстро развивается. Из этих двух Trek's гораздо более актуален.
Какие компоненты каждого из них являются личными предпочтениями и какие компоненты окажутся важными по мере развития моего приложения? Если вы разрабатываете новое приложение ember, я бы не рекомендовал следовать подходу Code Lab. Это слишком устарело, чтобы быть полезным.
В дизайне Code Lab Ember кажется более близким к существующему в приложении (хотя это 100% его пользовательского JS), тогда как приложение Trek, похоже, больше живет в Ember.
Ваш комментарий удачный. CodeLab использует преимущества основных компонентов Ember и получает к ним доступ из глобальной области видимости. Когда он был написан (9 месяцев назад), это было довольно распространено, но сегодня лучшая практика для написания приложений ember намного ближе к тому, что делал Trek.
Тем не менее, даже учебник Trek устаревает. Компоненты, которые были необходимы ApplicationViewи ApplicationControllerтеперь создаются самой платформой.
На сегодняшний день самым последним ресурсом является набор руководств, опубликованных на http://emberjs.com/guides/
- они были написаны с нуля за последние несколько недель и отражают последнюю (предварительную) версию ember.
Я бы также ознакомился с проектом wip в trek: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
ИЗМЕНИТЬ :
@ sly7_7: Я бы также привел другой пример, используя ember-data https://github.com/dgeb/ember_data_example