Было сложно идти в ногу с эволюцией Ember JS по мере приближения (и достигнутой!) версии 1.0.0. Учебники и документация приходят и уходят, что приводит к большой путанице в отношении лучших практик и намерений оригинальных разработчиков.
Мой вопрос в том, что: Каковы лучшие практики для Ember JS? Есть ли обновленные учебные пособия или рабочие образцы, показывающие, как планируется использовать Ember JS? Примеры кода были бы замечательными!
Спасибо всем, особенно разработчикам Ember JS!
Существует важный проект, который должны использовать как новые, так и опытные разработчики Ember.js:
Хотя для командной строки требуется некоторый уровень комфорта, вы можете создать современный проект Ember с рекомендуемыми рекомендациями сообщества в считанные секунды.
Хотя полезно настроить проект Ember.js, как трудно ответить Майку Грассотти, вы не должны делать этого для производственного кода. Особенно, когда у нас есть такой мощный и простой в использовании проект, например Ember-CLI, чтобы показать нам одобренный Yehuda счастливый путь.
В этом руководстве по быстрому старту вы получите от ноль до чуть более, чем ноль за пару минут. Когда это будет сделано, вы должны чувствовать себя уверенно, что ember.js действительно работает и, надеюсь, будет достаточно заинтересован, чтобы узнать больше.
ПРЕДУПРЕЖДЕНИЕ. Не просто попробуйте это руководство, а затем подумайте, что причина в том, что "я мог бы написать этот быстрый стартовый гид в jQuery или Fortran" или что-то еще. Я не пытаюсь продать вас на ember или что-то еще, это руководство - это нечто большее, чем приветственный мир.
этот jsFiddle содержит весь код из этого ответа
Для 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>
По умолчанию ember заменит тело вашей html-страницы, используя содержимое одного или нескольких шаблонов handlbars. Когда-нибудь эти шаблоны будут в отдельных файлах .hbs, собранных звездочками или, возможно, grunt.js. Пока мы будем хранить все в одном файле и использовать теги script.
Сначала добавьте один шаблон 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>
Просто добавьте еще один блок script с App = Ember.Application.create({}); для загрузки ember.js и инициализации вашего приложения.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
Это все, что вам нужно для создания базового приложения ember, но это не очень интересно.
Ember оценивает каждый шаблон handlebars в контексте контроллера. Таким образом, шаблон application имеет совпадение ApplicationController. Ember создает автоматически, если вы его не определяете, но здесь можете настроить его для добавления свойства сообщения.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
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 router будет отображать соответствующий шаблон в розетку в зависимости от маршрута пользователя. Мы также будем использовать помощник {{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.js и, конечно же, соответствующих авторов учебников: когда следует использовать шаблоны дизайна из одного учебника, а также из другого?
Эти два учебника представляют лучшие практики в то время, когда они были написаны. Конечно, есть что-то, что можно извлечь из каждого, и то, и другое печально обречено стать устаревшим, потому что ember.js движется очень быстро. Из двух, Trek гораздо более актуальным.
Какие компоненты каждого являются личными предпочтениями и какие компоненты окажутся важными, поскольку мое приложение созревает? Если вы разрабатываете новое приложение ember, я бы не рекомендовал следовать подходу Code Lab. Это слишком устарело, чтобы быть полезным.
В дизайне Code Lab Ember кажется ближе к существующим в приложении (хотя это 100% его пользовательской JS), тогда как приложение Trek, похоже, больше живет в Ember.
Ваш комментарий взят. CodeLab использует преимущества основных компонентов ember и получает доступ к ним из глобальной области. Когда это было написано (9 месяцев назад), это было довольно часто, но сегодня лучшая практика для написания приложений ember намного ближе к тому, что делал Trek.
Тем не менее, даже учебник Trek становится устаревшим. Компоненты, которые были необходимы ApplicationView и ApplicationController, теперь генерируются самой каркас.
На сегодняшний день самым последним ресурсом является набор руководств, опубликованных в http://emberjs.com/guides/ - они были написаны с нуля в течение последних нескольких недель и отражают последнюю (предварительную версию) версию ember.
Я также проверил бы проект trek wip здесь: 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
Есть 30 минут свежего скринкаста, сделанного @tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY
Я бы очень рекомендовал использовать Yeoman и сопровождающий его генератор ember. Из коробки вы получаете все инструменты, необходимые для разработки, тестирования и подготовки приложения к производству. В качестве дополнительного бонуса вы сможете разделить шаблоны просмотров на несколько файлов и начать с интеллектуальной структуры каталогов, которая облегчит вам создание поддерживаемой базы кода.
Я написал учебное пособие по его запуску и запуску около 5 минут. Просто установите node.js и следуйте здесь
Скринкаст Fire Fire Ember - Peepcode стоит смотреть.
Также пройдите через этот бесплатный учебник под названием Lets Learn Ember от Tuts + Premium". Это бесплатно, потому что это из их серии free courses.
Этот курс, как говорят ребята из Tuts, разделен на четырнадцать легко читаемых глав.
Надеюсь, это поможет.
Привет,
Я предпочитаю подход с древесным углем. Это дает вам массу вещей из коробки, включая:
и многое другое.
и его супер легко настроить, просто запустите yo charcoal, чтобы создать приложение, а затем yo charcoal:module myModule, чтобы добавить новый модуль.
подробнее здесь: https://github.com/thomasboyt/charcoal
Я только что создал Starter Kit, если вы хотите использовать последнюю EmberJS с Ember-Data, с движком шаблонов Emblem. Все завернуты в Миддман, так что вы можете развиваться с CoffeeScript. Все на моем GitHub: http://goo.gl/a7kz6y
Хотя устаревшее Flame on Ember.js по-прежнему является хорошим учебным пособием для тех, кто впервые смотрит на ember.
Я начал создавать серию видеороликов, которые начинаются с Ember и основываются на использовании Ember в гневе в серьезных случаях использования для реальных вещей.
Если вы заинтересованы в том, чтобы увидеть, что это поражает свет дня (я более чем счастлив в конечном итоге опубликовать его, если у вас есть интерес), вам обязательно нужно перейти к сообщению, которое я сделал, и нажать "как" (или просто комментарий здесь, я думаю):
Я очень заинтересован в том, чтобы помочь сообществу процветать, но и помочь людям научиться создавать стандартные веб-сайты простым способом.