Краткое руководство по минимальной жизнеспособности 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