Темизация в ember-models-table 2.x

В версиях 1.х темизация была на уровне возможности задать несколько своих классов для элементов Компонента. В версиях 2.х доступно куда больше вариантов настройки внешнего вида Компонента.

В первую очередь изменен сам подход. В аддоне добавлена новая архитектурная единица Theme (см. папку themes). Изначально есть 4 темы — Bootstrap3, Bootstrap4, SemanticUI и Default. Как понятно из названий первых трех, они нужны в случаях, когда ваше приложение использует ту или другую библиотеку. Тема Default является родительской для всех остальных и не содержит никаких настроек визуализации.

Свою тему вы можете создать на основе любой из предопределенных. Примеры:

// app/themes/my-cool-theme.js
import DefaultTheme from './default';
export default DefaultTheme.extend({
  // ...
});
// app/themes/another-theme.js
import Bootstrap3Theme from './bootstrap3';
export default Bootstrap3Theme.extend({
  // ...
});

Не обязательно хранить файлы с темами в папке themes.

Для применения темы, надо создать ее экземпляр и передать его models-table.

// app/controllers/some-page.js
import Controller from '@ember/controller';
import MyCoolTheme from '../themes/my-cool-theme';
import AnotherTheme from '../themes/another-theme';
export default Controller.extend({
  themeOne: MyCoolTheme.create(),
  themeTwo: AnotherTheme.create(),
  columns: [/* ... */]
});

Передаем экземпляр класса темы через атрибут themeInstance Компонента:

{{! app/templates/some-page.hbs }}
{{models-table themeInstance=themeOne data=model columns=columns}}
{{models-table themeInstance=themeTwo data=model columns=columns}}

Посмотрим, из чего состоит тема. Ее можно разделить на три части:

  • Компоненты
  • Классы
  • Иконки

Последние два были представлены в версиях 1.х как атрибуты customClasses и customIcons. Иконки используются на кнопках навигации, в меню колонок, для кнопок сброса фильтров и как маркеры сортировок. Классы применяются к разным элементам внутри models-table. Секция «Компоненты» у теме содержит карту Компонентов, которые используются внутри models-table (их почти два десятка). Назовем их «внутренние Компоненты». По умолчанию, они все берутся из components/models-table/*. В рамках темы вы можете указать, например, что хотите вместо «обычного» models-table/columns-dropdown взять Компонент из models-table/themes/my-theme/columns-dropdown:

// app/themes/my-theme.js
import DefaultTheme from './default';
export default DefaultTheme.extend({
  components: {
    'columns-dropdown': 'models-table/themes/my-theme/columns-dropdown'
  }
});

Обратите внимание, что components не содержит в себе все поля из DefaultTheme.components. Это возможно из-за того, что в DefaultTheme свойство components объявлено как mergedProperty.

Главное, убедитесь, что объявленные Компоненты существуют. Чаще всего вам будет необходимо поменять только внешний вид внутреннего компонента, а не его логику. В таком случае сам компонент можно записать так:

// app/components/models-table/themes/my-theme/columns-dropdown.js
import DefaultDropdown from '../../columns-dropdown';
import layout from '../../../../templates/components/models-table/themes/my-theme/columns-dropdown';
export default DefaultDropdown.extend({
  layout
});

Здесь мы указали, что создаем новый Компонент на основе стандартного models-table/columns-dropdown, но с другим шаблоном.

По умолчанию Компоненты для тем находятся в папках components/models-table/themes/THEME_NAME.

На данный момент получается, что есть много способов настройки models-table:

  • Создать свою тему (на основе default)
  • Расширить уже существующую тему
  • Создать и использовать свои внутренние Компоненты
  • Переопределить стандартные внутренние Компоненты
  • Использовать блочное содержимое стандартных Компонентов и задать там свою разметку

Разберем каждый из них. Создание своей темы оправдано в ситуациях, когда вы не используете Bootstrap или SemanticUI. В таком случае вам все равно надо задать едва ли не все классы, а так же создать несколько своих внутренних компонентов. Новая тема «с чистого листа» отлично подойдет.

Расширение существующей темы подходит для ситуаций, когда в вашем проекте используется Bootstrap или SemanticUI. Скорее всего, часть объявленных в этих темах классов вам подойдет и не придется много переопределять.

Создавать свои внутренние Компоненты умесно в случаях, когда вы создаете свою новую тему с чистого листа.

Переопределять стандартные внутренние Компоненты можно в случаях когда существующая тема вам подходит, но надо внести какие-то правки в ее разметку. Например, в проекте вы используете SemanticUI, но в выпадающий список колонок вам надо добавить еще какой-то элемент. В таком случае в рамках проекта вы можете создать шаблон templates/components/models-table/themes/semanticui/columns-dropdown.hbs и в нем уже задать свою разметку. Это удобно, так как вам не приходится расширять саму тему.

Все Компоненты в models-table можно использовать с блочным содержимым. То есть, вы можете написать нечто вида:

{{#models-table data=data columns=columns action=action as |c|}}
  {{#c.table as |table|}}
    {{#table.header as |h|}}
      {{#h.row-filtering as |rf|}}
        {{#each rf.processedColumns as |column|}}
          {{#rf.row-filtering-cell column=column as |rfc|}}
            {{column.title}}
          {{/rf.row-filtering-cell}}
        {{/each}}
      {{/h.row-filtering}}
    {{/table.header}}
    {{#table.body as |body|}}
      {{#if body.allColumnsAreHidden}}
        {{body.columns-hidden}}
      {{else}}
        {{#if body.visibleContent.length}}
          {{#each body.visibleContent as |record index|}}
            {{body.row record=record index=index}}
            {{#if (exists-in body.expandedItems record)}}
              {{body.row-expand record=record index=index}}
            {{/if}}
          {{/each}}
        {{else}}
          {{body.no-data}}
        {{/if}}
      {{/if}}
    {{/table.body}}
    {{#table.footer as |footer|}}
      {{footer.summary}}
      {{footer.size-select}}
      {{#if useNumericPagination}}
        {{footer.pagination-numeric}}
      {{else}}
        {{footer.pagination-simple}}
      {{/if}}
    {{/table.footer}}
  {{/c.table}}
{{/models-table}}

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

Каждый из рассмотренных вариантов будет работать и вы получите таблицу в том виде, в котором ее описали. Какой из вариантов выбрать — решать вам. Можно исходить из простого тезиса — «если кода меньше в способе N, то используем его» 🙂

Рекомендую ознакомиться с кодом предопределенных тем, доступных внутри аддона.

, , ,

Советы и приемы по работе с ember-models-table 

Оставить комментарий

Top ↑ | Main page | Back