Переход с первой версии ember-models-table на вторую

ember-models-table@2
239 changed files with 15,200 additions and 3,878 deletions.

Команда разработчиков Эмбера уже не раз и не два говорила, что partial-шаблоны лучше не использовать. Вместо них можно использовать и нужно использовать Компоненты. До выхода версии Эмбер 2.15 такие шаблоны работали без проблем и можно было неспеша перестраиваться на Компоненты. Но в 2.15 появился баг {{link-to}} inside a partial stopped working. Соответственно, аддон models-table вообще перестал работать с версией Эмбер 2.15. Это и послужило катализатором для рефакторинга таблицы и выпуска новой мажорной версии.

И так, список изменений:

  • Внутри models-table все partial-шаблоны заменены на Компоненты
  • models-table теперь можно использовать с блочным содержимым
  • Изменена визуальная настройка Компонента

Установка аддона как и раньше выполняется командой:

ember install ember-models-table@2

Базовое использование компонента не изменилось. Вам по прежнему надо передать два параметра — data и columns:

{{models-table data=model columns=columns}}
{{models-table-server-paginated data=model columns=columns}}

Некоторые свойства компонента были заменены или убраны вообще. Они представлены в таблице ниже:

v 1.x v 2.x
expandedRowTemplate expandedRowComponent Вместо шаблона теперь передается имя Компонента, который будет отрисован
customIcons themeInstance Иконки и классы объединены в одну сущность (подробнее в документации themes и заметке о темизации)
customClasses
Каждый из этих шаблонов теперь представлен в виде Компонента. Раньше вы могли указать путь до шаблона, а теперь вы можете переопределить требуемый Компонент или же использовать блочное содержимое. Еще раз, ниже представленных свойств из первой версии аддона уже нет во второй версии.
simplePaginationTemplate components/models-table/pagination-simple API docs
numericPaginationTemplate components/models-table/pagination-numeric API docs
tableFooterTemplate components/models-table/table-footer API docs
componentFooterTemplate components/models-table/footer API docs
pageSizeTemplate components/models-table/page-size-select API docs
globalFilterTemplate components/models-table/global-filter API docs
columnsDropdownTemplate components/models-table/columns-dropdown API docs
noDataShowTemplate components/models-table/no-data API docs
rowTemplate components/models-table/row API docs
allColumnsHiddenTemplate components/models-table/columns-hidden API docs
headerSortingRowTemplate components/models-table/row-sorting API docs
headerSortingIconsTemplate
headerFilteringRowTemplate components/models-table/row-filtering API docs
headerGroupedRowsTemplate components/models-table/grouped-header API docs

Данные свойства остались без изменений:

columnSets, groupedHeaders, multipleColumnsSorting, useNumericPagination, showComponentFooter,
pageSize, showColumnsDropdown, useFilteringByColumns, filteringIgnoreCase, showGlobalFilter,
focusGlobalFilter, doFilteringByHiddenColumns, displayDataChangedAction, sendDisplayDataChangedAction,
columnsVisibilityChangedAction, sendColumnsVisibilityChangedAction, columnsAreUpdateable,
columnFieldsToCheckUpdate, showPageSize, multipleExpand, selectRowOnClick, multipleSelect,
preselectedItems, customMessages

В документации для models-table есть их описание.

В первой версии аддона у элементов из columns было порядка двух десятков опций. Почти все они остались и во второй версии. Были убраны три опции:

  • template. Вместо него используйте component
  • templateForFilterCell. Вместо него используйте componentForFilterCell
  • templateForSortCell. Вместо него используйте componentForSortCell

component, componentForFilterCell и componentForSortCell были и в первой версии аддона. Во второй их роль осталась такой же, но изменился набор атрибутов, которые в них передаются. В первую очередь, больше не передается сам компонент models-table. В документации к models-table-column есть описание атрибутов, которые получает каждый из них (см. по ссылке).

Ряд примеров по использованию компонента с разными параметрами и в разных ситуациях можно посмотреть на демо-странице. Их исходный код находится в репозитории с самим аддоном (см. по ссылке).

, , ,

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

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

Top ↑ | Main page | Back