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

Начнем доработку мы с настройки отображения поля “Табельный номер” и аналогичных ему на имеющихся в приложении формах редактирования. Рассмотрим настройку отображения данного поля на примере доработки формы редактирования “Сотрудник”. Для этого откроем соответствующий шаблон в Ember-приложении:

app → templates → i-i-s-shop-employee-e.hbs

В нашем приложении мы имеем следующие особенности при отображении поля “Табельный номер”:

1. данное поле не должно редактироваться пользователем;
2. на форме создания нового сотрудника данное поле имеет неактуальное значение из-за реализации автоинкремента для этого поля на стороне сервера (до момента сохранения соответствующей записи табельный номер всегда имеет значение 1).

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

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

• при создании нового сотрудника мы не будем выводить значение этого поля;
• при редактировании существующего сотрудника табельный номер мы будем дабавлять в заголовок формы в виде строки “Сотрудник №##”.

Найдем в шаблоне разметку с компонентами, которые отвечают за отображение и валидацию табельного номера (свойства number модели, которая в свою очередь является свойством соответствующего контроллера):

Для отображения данного поля используется компонент flexberry-field из аддона ember-flexberry, при этом в качестве свойства, из которого берутся данные для отображения на форме, используется model.number.

Закомментируем соответствующую разметку (выделяем разметку, далее нажимаем Ctrl+K - Ctrl+C при работе в Visual Studio Code) и посмотрим, как изменилась форма редактирования сотрудника:

Как мы видим, текстовое поле для отображения табельного номера более не отображается на форме.

Далее добавим в заголовок формы значение табельного номера. Для этого добавим в текст заголовка символ номера и значение табельного номера из модели:

<h3 class="ui header">
  {{t "forms.i-i-s-shop-employee-e.caption"}} № {{model.number}}
</h3>

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

Как мы говорили ранее, автоинкремент для табельного номера выполняется на стороне сервера, поэтому изначально при создании новой записи о сотруднике актуальное состояние номера еще не получено. Поэтому вместо отображения заголовка “Сотрудник №1” правильно было бы выводить заголовок “Сотрудник” без указания номера.

Для реализации указанной выше логики отображения загловка воспользуемся хелпером {{#unless}} фремворка Ember.js. Он уже используется в шаблоне формы для отображения кнопки “Удалить”:

Добавим аналогичную конструкцию в заголовок (выводить табельный номер будем в том случае, когда соответствующая модель имеет состояние, отличное от “новой”):

<h3 class="ui header">
  {{t "forms.i-i-s-shop-employee-e.caption"}}
  {{#unless model.isNew}}
    № {{model.number}}
  {{/unless}}
</h3>

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

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

Фамилия: Сидоров
Имя: Сидор
Отчество: Сидорович
Телефон: 200-00-05
Электронная почта: sidorovss@shop.ru
Должность: Менеджер

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

Теперь исходную разметку для табельного номера, которую мы ранее закомментировали, можно удалить из шаблона i-i-s-shop-employee-e.hbs.

---

Самостоятельно модифицируйте следующие шаблоны:

i-i-s-shop-invoice-e.hbs

Разметку для поля “Номер” - удалить
Привести заголовок формы к виду “Накладная ##”, где ## - номер сохраненной накладной

i-i-s-shop-order-e.hbs

Разметку для поля “Номер” - удалить
Привести заголовок формы к виду “Заказ ##”, где ## - номер сохраненного заказа

i-i-s-shop-product-e

Разметку для поля “Код товара” - удалить
Привести заголовок формы к виду “Товар ##”, где ## - код сохраненного товара

i-i-s-shop-storehouse-e.hbs

Разметку для поля “Номер” - удалить
Привести заголовок к виду “Склад № ##”, где ## - номер сохраненного склада

---

Итог

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

Самостоятельная работа

Вы можете выполнить следующие доработки в приложении самостоятельно для более детальной проработки требований к функционалу приложения:

1. выводить в заголовках форм для содания новых записей слово “Новый” (например, “Новый сотрудник” вместо заголовка “Сотрудник”).

Перейти

• Практическое руководство «Делай как я»

• Добавление тестовых данных
• Настройка компонентов