Ember.js: идеальная платформа для веб-приложений

На самом верхнем уровне вы заметите следующие файлы и каталоги:

• README.md — это стандартный файл readme, описывающий приложение
• package.json — это стандартный файл конфигурации npm, описывающий ваше приложение. Это используется в первую очередь для правильной установки зависимостей.
• ember-cli-build.js — это конфигурация инструмента Ember CLI для поддержки нашей сборки.
• testem.js — это конфигурация для тестовой среды. Это позволяет вам, помимо прочего, определить браузеры, которые следует использовать для запуска тестов в различных средах.
• приложение / — это фактическая логика приложения. Здесь много чего будет описано ниже.
• config / — это конфигурация для приложения
  • config / target.js — это список поддерживаемых браузеров. Это используется Бабелем для обеспечения того, чтобы Javascript передавался таким образом, чтобы все они работали.
  • config / environment.js — это основная конфигурация для вашего приложения. Все, что необходимо для приложения, но может варьироваться в зависимости от среды, должно быть здесь.
• public / — это любые статические ресурсы, которые вы хотите включить в свое приложение. Например, изображения и шрифты.
• vendor / — это то место, куда переходят любые зависимости внешнего интерфейса, которые не управляются системой сборки
• тесты / — это то, где все тесты идут
  • tests / unit — это все модульные тесты для приложения
  • тесты / интеграция — это все интеграционные тесты для приложения

Общая структура страницы (включая стороннее содержимое)

Прежде чем мы зайдем слишком далеко, давайте дадим нашей странице некоторую форму структуры. В этом случае мы собираемся добавить в CSS-среду Materialise, чтобы улучшить внешний вид.

Добавление поддержки стороннего контента, подобного этому, может быть выполнено несколькими способами:

• Прямая ссылка на контент на внешнем сервисе, таком как CDN
• Использование менеджера пакетов, такого как npm или Bower, чтобы установить его для нас
• Включая это прямо в нашем приложении.
• Использование Ember Addon, если оно есть

К сожалению, аддон для Materialize еще не работает с последней версией Ember.js, поэтому вместо этого мы просто будем ссылаться на ресурсы CDN с нашей главной страницы. Чтобы добиться этого, мы собираемся обновить app/index.html , который является структурой главной страницы, в которую отображается наше приложение. Мы просто добавим ссылки CDN для jQuery, Google Icon Font и Materialize.

 <!-- Inside the Head section --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> <!-- Inside the Body section --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script> 

Теперь мы можем обновить главную страницу, чтобы показать наш основной шаблон. Это делается путем редактирования app/templates/application.hbs так:

 <nav> <div class="nav-wrapper"> <a href="#" class="brand-logo"> <i class="material-icons">filter_6</i> Dice Roller </a> <ul id="nav-mobile" class="right hide-on-med-and-down"> </ul> </div> </nav> <div class="container"> {{outlet}} </div> 

Это дает нам Materialize Nav в верхней части экрана с контейнером, содержащим упомянутый ранее тег {{outlet}} .

Это выглядит так при посещении в вашем браузере:

Так что же это за outlet ? Ember работает вне маршрутов, где каждый маршрут считается дочерним по отношению к какому-либо другому маршруту. Самый верхний маршрут обрабатывается Ember автоматически и отображает шаблон app/templates/application.hbs .

outlet тег указывает, где Ember будет отображать следующий маршрут в текущей иерархии — поэтому маршрут первого уровня отображается в этом теге в application.hbs , маршрут второго уровня отображается в этом теге в этом шаблоне первого уровня и так далее.

Создание нового маршрута

В приложении Ember.js каждая страница, которую можно посетить, доступна через маршрут. Существует прямое сопоставление между URL-адресом, который открывает браузер, и маршрутом, который отображает приложение.

Самый простой способ убедиться в этом на примере. Давайте добавим новый маршрут в наше приложение, позволяющее пользователю фактически бросить несколько кубиков. Еще раз, это делается с помощью инструмента ember-cli.

 $ ember generate route roll installing route create app/routes/roll.js create app/templates/roll.hbs updating router add route roll installing route-test create tests/unit/routes/roll-test.js 

Эта команда дала нам следующее:

• Обработчик маршрута — app/routes/roll.js
• Шаблон для маршрута — app/templates/roll.hbs
• Тест для маршрута — tests/unit/routes/roll-test.js
• Обновлена ​​конфигурация маршрутизатора, чтобы узнать об этом новом маршруте — app/router.js

Давайте посмотрим это в действии. На данный момент у нас будет очень простая страница, позволяющая нам бросать несколько кубиков. Для этого обновите app/templates/roll.hbs следующим образом:

 <div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s12"> <input placeholder="Name" id="roll_name" type="text" class="validate"> <label for="roll_name">Name of Roll</label> </div> </div> <div class="row"> <div class="input-field col s6"> <input placeholder="Number of dice" id="number_of_dice" type="number" class="validate" value="1"> <label for="number_of_dice">Number of Dice</label> </div> <div class="input-field col s6"> <input placeholder="Number of sides" id="number_of_sides" type="number" class="validate" value="6"> <label for="number_of_sides">Number of Sides</label> </div> </div> <div class="row"> <button class="btn waves-effect waves-light" type="submit" name="action"> Roll Dice <i class="material-icons right">send</i> </button> </div> </form> </div> {{outlet}} 

 <ul id="nav-mobile" class="right hide-on-med-and-down"> {{#link-to 'roll' tagName="li"}} <a href="roll">Roll Dice</a> {{/link-to}} </ul> 

 $ ember generate component roll-dice installing component create app/components/roll-dice.js create app/templates/components/roll-dice.hbs installing component-test create tests/integration/components/roll-dice-test.js 

 <form class="col s12"> <div class="row"> <div class="input-field col s12"> <input placeholder="Name" id="roll_name" type="text" class="validate"> <label for="roll_name">Name of Roll</label> </div> </div> <div class="row"> <div class="input-field col s6"> <input placeholder="Number of dice" id="number_of_dice" type="number" class="validate" value="1"> <label for="number_of_dice">Number of Dice</label> </div> <div class="input-field col s6"> <input placeholder="Number of sides" id="number_of_sides" type="number" class="validate" value="6"> <label for="number_of_sides">Number of Sides</label> </div> </div> <div class="row"> <button class="btn waves-effect waves-light" type="submit" name="action"> Roll Dice <i class="material-icons right">send</i> </button> </div> </form> 

 <div class="row"> {{roll-dice}} </div> {{outlet}} 

 /* global Materialize:false */ import Ember from 'ember'; export default Ember.Component.extend({ didRender() { Materialize.updateTextFields(); } }); 

  rollName: '', numberOfDice: 1, numberOfSides: 6, 

 <div class="row"> <div class="input-field col s12"> <!-- This replaces the <input> tag for "roll_name" --> {{input placeholder="Name" id="roll_name" class="validate" value=(mut rollName)}} <label for="roll_name">Name of Roll</label> </div> </div> <div class="row"> <div class="input-field col s6"> <!-- This replaces the <input> tag for "number_of_dice" --> {{input placeholder="Number of dice" id="number_of_dice" type="number" class="validate" value=(mut numberOfDice)}} <label for="number_of_dice">Number of Dice</label> </div> <div class="input-field col s6"> <!-- This replaces the <input> tag for "number_of_sides" --> {{input placeholder="Number of sides" id="number_of_sides" type="number" class="validate" value=(mut numberOfSides)}} <label for="number_of_sides">Number of Sides</label> </div> </div> 

  actions: { triggerRoll() { alert(`Rolling ${this.numberOfDice}D${this.numberOfSides} as "${this.rollName}"`); return false; } } 

 <form class="col s12" onsubmit={{action 'triggerRoll'}}> 

 actions: { saveRoll: function(rollName, numberOfDice, numberOfSides) { alert(`Rolling ${numberOfDice}D${numberOfSides} as "${rollName}"`); } } 

 triggerRoll() { this.sendAction('roll', this.rollName, this.numberOfDice, this.numberOfSides); return false; } 

 {{roll-dice roll="saveRoll" }} 

 $ ember generate model roll installing model create app/models/roll.js installing model-test create tests/unit/models/roll-test.js 

 import DS from 'ember-data'; export default DS.Model.extend({ rollName: DS.attr('string'), numberOfDice: DS.attr('number'), numberOfSides: DS.attr('number'), result: DS.attr('number') }); 

 saveRoll: function(rollName, numberOfDice, numberOfSides) { let result = 0; for (let i = 0; i < numberOfDice; ++i) { result += 1 + (parseInt(Math.random() * numberOfSides)); } const store = this.get('store'); // This requests that the store give us an instance of our "roll" model with the given data const roll = store.createRecord('roll', { rollName, numberOfDice, numberOfSides, result }); // This tells our model to save itself to our backend roll.save(); } 

 import Ember from 'ember'; export default Ember.Route.extend({ model() { return this.get('store').findAll('roll'); } }); 

 <table> <thead> <tr> <th>Name</th> <th>Dice Rolled</th> <th>Result</th> </tr> </thead> <tbody> {{#each model as |roll|}} <tr> <td>{{roll.rollName}}</td> <td>{{roll.numberOfDice}}D{{roll.numberOfSides}}</td> <td>{{roll.result}}</td> </tr> {{/each}} </tbody> </table> {{outlet}}