Начало работы с Ember и Ember CLI

 import Ember from 'ember'; export default Ember.Route.extend({ model: function(){ return this.store.find('user'); } }); 

Настройте данные прибора и создайте пользовательский шаблон

На данный момент, давайте добавим некоторые временные данные в наше приложение. Для этого выполните команду

 ember generate adapter application 

Это создает файл с именем application.js в папке app/adapters/ . По умолчанию Ember использует RestAdapter для запроса моделей. Этот адаптер предполагает, что у вас есть внутренняя система, которая передает данные JSON вашему клиентскому приложению Ember. Поскольку у нас нет бэкэнда, в этом случае мы хотим использовать данные о приборах. Поэтому мы обновим код адаптера следующим образом:

 import DS from 'ember-data'; export default DS.FixtureAdapter.extend({ }); 

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

 User.reopenClass({ FIXTURES: [{ id: 1, firstName: 'James', lastName: 'Rice', addressLine: '66 Belvue Road', postCode: 'M235PS', country: 'United Kingdom' }] }); 

Если вы перейдете по URL localhost:4200/users , вы увидите только старое приветственное сообщение, а не добавленные нами данные пользовательских фикстур. Чтобы увидеть пользовательские данные, нам нужно создать шаблон для пользователей с помощью команды:

 ember generate template users 

Это создает файл с именем users.hbs в папке app/templates/ . Откройте этот файл и обновите его содержимое следующим образом:

 <ul> {{#each user in model}} <li>{{user.firstName}} {{user.lastName}} <span>Edit</span></li> {{/each}} </ul> {{outlet}} 

Теперь вы должны увидеть список пользователей с текстом редактирования рядом с каждым. Поскольку у нас есть только один пользователь в данных прибора, мы увидим только одного пользователя. Не стесняйтесь добавлять как можно больше пользовательских объектов к пользовательским приборам. Просто убедитесь, что у каждого есть уникальный идентификатор.

Показать одного пользователя

Теперь, когда мы перечислили наших пользователей, давайте посмотрим, как отобразить полную информацию о пользователе. Прежде всего. измените код в шаблоне users , изменив элемент li , как показано ниже:

 <li> {{#link-to 'users.show' user}} {{user.firstName}} {{user.lastName}} {{/link-to}} <span>Edit</span> </li> 

Это должно окружать имя каждого пользователя ссылкой. Когда вы нажимаете на ссылку, должен измениться только URL-адрес, в то время как все на странице остается прежним. Это потому, что мы не создали ни одного пользовательского шаблона.

Запустите команду:

 ember generate template users/show 

На данный момент созданный шаблон ( app/templates/users/show.hbs ) пуст. Откройте его и добавьте следующий код:

 <p>{{#link-to 'users' }}back{{/link-to}} to Users</p> <p>First Name: {{model.firstName}}</p> <p>Last Name: {{model.lastName}}</p> <p>Address: {{model.addressLine}}</p> <p>Postcode: {{model.postCode}}</p> <p>Country: {{model.country}}</p> 

При этом вы сможете увидеть полную информацию о каждом пользователе, на которого вы нажали.

Редактировать одного пользователя

Если вы хотите редактировать одного пользователя, вам нужно выполнить несколько простых шагов. Для начала сначала создайте ссылку на маршрут редактирования пользователя, обернув текст « Edit рядом с именем каждого пользователя ссылкой. Затем измените Edit на

 {{#link-to 'users.edit' user }}Edit {{/link-to}} 

Далее, давайте сгенерируем пользовательский контроллер, используя:

 ember generate controller users/edit 

Внутри (пользовательский контроллер) измените содержимое так, как указано ниже:

 import Ember from 'ember'; export default Ember.Controller.extend({ actions: { saveUser: function(user){ user.save(); this.transitionToRoute('users'); } } }); 

После этого создайте шаблон для редактирования пользователей, используя:

 ember generate template users/edit 

В новом шаблоне app/templates/users/edit вставьте следующий код:

 <p>{{#link-to 'users' }}back{{/link-to}} to Users</p> <form {{action 'saveUser' model on='submit' }} > <p>First Name: {{input value=model.firstName}}</p> <p>Last Name: {{input value=model.lastName}}</p> <p>Address: {{input value=model.addressLine}}</p> <p>Postcode: {{input value=model.postCode}}</p> <p>Country: {{input value=model.country}}</p> <p><input type="submit" value="Save" ></p> </form> 

Этот код вызывает saveUser() на нашем контроллере, когда мы отправляем форму. Функция передается редактируемому пользователю и сохраняет измененную информацию.

С этим изменением, когда вы нажимаете на ссылку редактирования для пользователя, вы можете редактировать его данные. Вы можете сохранить их, нажав кнопку «Сохранить», после чего вы будете перенаправлены обратно в список пользователей. Ура! Теперь у нас есть простой менеджер списков контактов.

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

Выводы

Ember — это фреймворк для создания амбициозных веб-приложений . У него есть философия соглашения о конфигурации, это означает, что он основан на нескольких общих решениях и имеет много стандартных (соглашений), которые облегчают процесс разработки для вас. Таким образом, вам не нужно принимать много тривиальных решений во время разработки.

Я надеюсь, что вам понравилось читать этот учебник и вы узнали что-то новое о том, как использовать такую ​​мощную, но простую инфраструктуру JavaScript в ваших проектах. Пожалуйста, дайте нам знать ваши мысли в комментариях ниже. Вы можете найти код для приложения на GitHub .