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

Автор оригинала: FreeCodeCamp Community Member.

Трейси Ли | ладонь

Итак, вы хотите проверить Эмбер, а? Эта статья будет проходить через создание базового приложения.

Вот что мы будем делать:

Настройка Ember-Cli
Создать новое приложение
Используйте материализацию-CSS для стилизации
Создание компонентов
Обложка Основное использование маршрутизатора EMBER
Исследуйте «каждый» помощник для итерации данных

Первые вещи сначала, вы должны установить Ember-CLI. Почти все приложения построены с Ember-CLI. Очень редко, что вы найдете тот, который нет.

И вот одна серьезная выгода от Ember и Ember Community – они полагаются на Конвенцию над конфигурацией более сильно, чем угловые и реагирующие. Они используют это одним из их сильных сторон, что делает их популярными рамками для компаний, которые хотят построить крупные приложения.

Быть условным позволяет EMBER разработать стандарты сообществ, таких как история об развертывании EMBER-CLI, сильная история вокруг данных Ember, а также нагрузки вклады Сообщество может пройти через экосистему Ember Addon. (Проверить emberaddons.com Несомненно

На веб-сайте Ember.js вы найдете простые инструкции по установке, и даже небольшое быстрое руководство по быстрому запуску вы можете пройтись!

Продолжайте и установите Ember-CLI, чтобы начать:

$ npm install -g ember-cli

Создание нового приложения

Это так просто, как 1-2-3! Просто Ember New Меня> и приложение будет сгенерировано для вас.

ember new yolobrolo

Вы увидите Ember-CLI, создавая довольно несколько файлов.

Главным образом, вы должны отметить, что EMBER создал:

Application.hbs (руль, который является вашим HTML-файлом)
app.js.
Router.js.
Package.json.
Bower.json.
тесты

Wahoo! Теперь, если вы открываете свою IDE, вы должны увидеть структуру приложения Ember.

Установка материализация-CSS

Если вам интересно, я люблю материальный дизайн и материализация-CSS.

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

npm install materialize-css

Затем добавьте эти строки в свой файл index.html

Когда закончите, убейте свой сервер и перезапустите его. Ваш шрифт должен перейти на Roboto:

Создание компонентов

Ember, как и большинство JavaScript Frameworks в наши дни, любит компоненты. Итак, давайте создадим компонент, который нам нужен: навигационная панель, которую мы можем подключить маршрутизатор! Мы используем навигационную панель, что материализация-CSS дает нам.

Все, что вам нужно сделать, чтобы создать компонент, это:

ember g component

Убедитесь, что имя вашего компонента имеет тире на имя, так как это Конвенция.

Вот файлы, которые Ember-CLI генерируют для меня. Это создает:

Компонентное имя.hbs.
Компонент-name.js.
Добавляет интеграционные тесты

Вот как выглядит моя симпатичная навигация.

Вот код по умолчанию, если вам нравится:

          Logo              Videos
        About

В любое время вам нужно повторно использовать кусок кода снова и снова, всегда лучше всего сделать его компонентом.:)

Использование маршрутизатора EMBER

Я думаю, что принимаю роутер Ember как должным после того, как он так играл в угловых 2.

На самом деле, я думаю, что принимаю роутеры как должное в целом, но вот мой друг Jay Phelps. рассказывая нам, почему мы должны заботиться.

Вот базовый обзор того, как работает маршрутизатор Ember.

Первые вещи, сначала, вы должны отметить, что есть файл Router.js, в котором определены все ваши маршруты. Кроме того, в вашем файле application.hbs есть {{outlet}}, который выводит все, что вы указываете маршрутизатор.

В моем приложении я хочу создать 2 простых маршрута – о странице страницы и видео.

Чтобы создать новый маршрут, который вы запускаете эту команду в Ember-CLI.

ember g route

Затем Ember генерирует:

Ваш-маршрут
ваш-маршрут .hbs.
Обновите файл Router.js
Создайте тест на единицу.

Вы можете увидеть всю магию из командной строки:

Мне нравится, как файл Router.js автоматически обновляется для меня. Вы даже можете создавать вложенные маршруты из командной строки. Гиды Ember.js довольно удивительны, и вот ссылка ко всему, что роутер может сделать.

Одна вещь, которую я сделал на скриншоте ниже, был определить мой маршрут по умолчанию. Я сделал это, просто указав путь маршрута как/. Все остальное было предварительно создано для меня с CLI.

this.route('videos', { path:'/' });

Настройка выхода маршрутизатора EMBER

Давайте исследуем файл application.hbs. Это где выводится маршрутизатор.

Действительно, одно из единственных вещей, которые я добавляю в мой файл Application.hbs – это навигационная панель и нижний колонтитул. Я создаю маршруты для всего остального.

В настоящее время мой файл Application.hbs выглядит так.

Теперь, входя в мою компонент Nav-Bar, я собираюсь получить маршруты, идущие на страницу маршрута и видео маршрутом.

EMBER использует помощник {{link-to}} для переходов между маршрутами.

Вот что выглядит синтаксис:

{{#link-to 'videos'}}Videos{{/link-to}}

Helper {{link-to}} заменяет тег и является тем, как мы переходим между маршрутами в Ember. Все, что вам нужно сделать, это указать маршрут в отелях, как показано выше. В угловых 2 эквивалент представляет собой маршрутную ссылку.

Вот скриншот моей навигации.

Теперь вы знаете, как использовать очень основные функциональные возможности маршрутизатора!

Итализация данных, используя каждый помощник

У меня есть видео маршрут, и я хотел бы отобразить набор видео YouTube на странице. Я собираюсь создать простой компонент Video-Card, который я буду итерации и отображать на видео.

Это как выглядит одна видеокарта:

Часть красоты EMBER – это все помощники, которые позволяют вам делать классные вещи в вашем приложении.

Хельпер Ember {{Cay}} эквивалентен директиве NG-Repeat в угловых 1 и Директиве * NGPOR в угловых 2.

Полные эмберские документы на каждый помощник и помощников в целом – здесь Отказ

Вот что выглядит код для одного видео YouTube:

    Title
 
   
  With Taras Mankovski

После прокладки, я понимаю, что я хочу повторять более 3 частей данных – название, видео ссылка на YouTube, а также человек, представленный в видео.

Итак, мне нужно определить мои данные в массиве в моем компонент .js файл, как таковой:

model: [{ title: "Ember DND Helper", people: "Taras Mankovski", videoLink: "peNV2yJRMLo?rel=0" },{ title: "Dependency Injection in Angular 2", people: "Patrick J. Stapleton", videoLink: "46WovCX8i-I?rel=0" },{ title: "Angular CLI", people: "Mike Brocchi", videoLink: "BmZLpNRNnZo" },{ title: "Angular Material 2 Spelunking & Issue Submission", people: "Ben Lesh", videoLink: "3gNsyL7wpXU" }]});

Затем я, наконец, могу использовать Helper {{каждый}}, чтобы повторить мои данные.

Оберните содержимое helper {{chare}}, как показано ниже, определяя модель и вашу локальную переменную:

{{#each model as |video|}} CONTENT {{/each}}

Затем возьмите кусочки контента, которые вы хотели бы быть динамичным и заменить его рулем и LocalVariable.x, как так:

{{video.title}}

src="https://www.youtube.com/embed/{{video.videoLink}}"

{{video.people}}

Вот что выглядит код, когда все это сказано и сделано:

 {{#each model as |video|}}    {{video.title}}
 
   
  With {{video.people}} 
 
 
 {{/each}}

Вот конечный результат использования Helper {{каждый}}.

Развертывание Героку

Когда-то существовал человек, называемый Tonycoco. И Tonycoco сделал развертывание Ember Apps в Heroku Super легко. Вот его github repo. Если вы хотите взглянуть на это.

Во-первых, у вас должна быть установлена инструментарий Heroku Toolbelt и связана с вашей учетной записью Heroku.

Затем все, что вам нужно сделать, чтобы развернуть в Heroku, это зафиксировать ваши изменения в Master и Push.

$ heroku create — buildpack https://github.com/tonycoco/heroku-buildpack-ember-cli.git

$ git push heroku master

Подождите, пока он полностью завершит развертывание.

Идите в свой Heroku App приборная панель Отказ Обновите приложение к нужным имени (чтобы соответствовать вашему приложению).

Теперь измените удаленное имя Heroku, чтобы сопоставить новое имя приложения в вашем файле .git/config.

Тогда Git Push Heroku Master Опять же, и вы должны быть все набор!

В этом случае это приложение развернуто: http://yolobrolo-ember-1.herokuapp.com/

Йоло! Веселиться с этим. Надеюсь, вы попробуете Ember и наслаждаетесь этим.

Следите за мной построить этот шаг за шагом

О, также, для ваших целей просмотра, вы можете посмотреть меня построить это На YouTube в Yolobrolo Отказ

Оригинал: “https://www.freecodecamp.org/news/setting-up-a-basic-ember-js-app-c9323760c675/”