Как спроектировать приложение Ember.js

Было сложно угнаться за развитием Ember JS по мере приближения (и достижения!) Версии 1.0.0. Учебники и документация приходили и уходили, что привело к путанице в отношении передовых практик и намерений первоначальных разработчиков.

Мой вопрос именно таков: каковы лучшие практики для Ember JS? Есть ли обновленные руководства или рабочие образцы, показывающие, как предполагается использовать Ember JS? Примеры кода были бы отличными!

Спасибо всем, особенно разработчикам Ember JS!

Есть важный проект, которым должны воспользоваться как новички, так и опытные разработчики Ember.js:

Ember-CLI

Хотя для этого требуется определенный уровень комфорта с командной строкой, вы можете сгенерировать современный проект Ember с использованием передовых методов, рекомендованных сообществом, за считанные секунды.

Хотя выгодно настроить проект Ember.js сложным способом, как в ответе Майка Грассотти, вы не должны делать это для производственного кода. Особенно, когда у нас есть такой мощный и простой в использовании проект, как Ember-CLIпоказать нам одобренный Иегудой счастливый путь .

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

@Tomdale сделал 30-минутный свежий скринкаст: https://www.youtube.com/watch?v=Ga99hMi7wfY

Я очень рекомендую использовать Yeoman и прилагаемый к нему генератор углей. Из коробки вы получаете все инструменты, необходимые для разработки, тестирования и подготовки приложения к производству. В качестве дополнительного бонуса вы сможете разделить шаблоны представления на несколько файлов и начать с интеллектуальной структуры каталогов, которая облегчит вам создание поддерживаемой базы кода.

Я написал руководство по его настройке и запуску примерно за 5 минут. Просто установите node.js и следуйте здесь

Стоит посмотреть скринкаст Fire Up Ember - Peepcode .

Также просмотрите это бесплатное руководство под названием Let's Learn Ember от Tuts + Premium. Это бесплатно, потому что это из их free coursesсерии. Этот курс, как его называют ребята из тутов, разделен на четырнадцать простых для понимания глав.

Надеюсь, это поможет.

С Уважением,

Я предпочитаю угольный йомен. Он дает вам массу вещей из коробки, в том числе:

• хорошая архитектура папок с использованием «модульного» подхода.
• средний
• живая перезагрузка
• минимизировать
• уродовать
• jshint

и больше.

и его очень легко настроить, просто запустите, yo charcoalчтобы создать приложение, а затем yo charcoal:module myModuleдобавить новый модуль.

подробнее здесь: https://github.com/thomasboyt/charcoal

Я только что создал Starter Kit, если вы хотите использовать последнюю версию EmberJS с Ember-Data, с механизмом шаблонов Emblem. Все это завернуто в Middleman, так что вы можете разрабатывать с CoffeeScript. Все на моем GitHub: http://goo.gl/a7kz6y

Хотя устаревший Flame на Ember.js по-прежнему является хорошим руководством для тех, кто впервые смотрит на ember.

Я начал создавать серию видеороликов, которые начинаются еще до Ember и строятся на использовании Ember в гневе в серьезных случаях использования для реальных вещей.

Если вы заинтересованы в том, чтобы увидеть этот хит в дневном свете (я более чем счастлив в конечном итоге опубликовать его, если есть интерес), вам обязательно нужно перейти к опубликованному мной сообщению и нажать «Нравится» (или просто прокомментировать здесь, Я думаю):

http://discuss.emberjs.com/t/making-ember-easier-to-approach-aka-crazy-screencasts-videos-that-will-stick-in-your-mind-for-learning-ember/5284

Я очень хочу сделать это, чтобы помочь сообществу процветать, но также и помочь людям научиться легко создавать стандартные веб-сайты.