From 2e8fb6d52c46cc61b1a1ff60de2602414dca400c Mon Sep 17 00:00:00 2001 From: Svetlana Date: Thu, 18 Jul 2024 14:34:09 +0500 Subject: [PATCH 1/5] Add ember-flexberry-infinite-scroll info --- _data/sidebars/flexberry-ember-3_sidebar.yml | 5 +++ .../ef3_ember_flexberry_infinite_scroll.ru.md | 42 +++++++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md diff --git a/_data/sidebars/flexberry-ember-3_sidebar.yml b/_data/sidebars/flexberry-ember-3_sidebar.yml index 3e357a8b7..bdae9ebc4 100644 --- a/_data/sidebars/flexberry-ember-3_sidebar.yml +++ b/_data/sidebars/flexberry-ember-3_sidebar.yml @@ -200,3 +200,8 @@ entries: title_ru: Ember flexberry tinymce url: /ef3_ember_flexberry_tinymce.html output: web, pdf + + - title: Ember flexberry infinite scroll + title_ru: Ember flexberry infinite scroll + url: /ef3_ember_flexberry_infinite_scroll.html + output: web, pdf diff --git a/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md b/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md new file mode 100644 index 000000000..ed82d261b --- /dev/null +++ b/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md @@ -0,0 +1,42 @@ +--- +title: Аддон Ember flexberry infinite scroll +sidebar: flexberry-ember-3_sidebar +keywords: Ember Flexberry infinite scroll +toc: true +permalink: ru/ef3_ember_flexberry_infinite_scroll.html +lang: ru +summary: Описание аддона Ember flexberry infinite scroll +--- + +## Описание аддона + +`ember-flexberry-infinite-scroll` - аддон для [ember-flexberry](https://github.com/Flexberry/ember-flexberry/tree/develop) с компонентом бесконечной прокрутки. + +## Установка + +```cmd +ember install ember-flexberry-infinite-scroll +``` + +Требуется версия node 12 или выше. + +## Использование + +В шаблоне для использования компонента прописать: + +```hbs +{{flexberry-infinite-scroll + modelProjection=modelProjection + content=infiniteModel + lastReached=(action "lastReached") + estimateRowHeight=20 + bufferSize=1 +}} +``` + +где: + +* modelProjection - название проекции, где определены отображаемые на списке свойства модели. +* infiniteModel - название модели, чьи свойства будут отображены на списке. +* estimateRowHeight - высота ячеек таблицы компонента. +* bufferSize - сколько дополнительных строк (сверх видимых) должно быть загружено и отображено (помогает сгладить переходы между страницами и обеспечивает более плавную прокрутку). From 80ecf7f472b17fcced93d85a8892aa1e2e56261c Mon Sep 17 00:00:00 2001 From: Svetlana Date: Thu, 18 Jul 2024 14:48:50 +0500 Subject: [PATCH 2/5] Add controller info --- .../ef3_ember_flexberry_infinite_scroll.ru.md | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md b/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md index ed82d261b..6ef5e6ea2 100644 --- a/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md +++ b/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md @@ -40,3 +40,40 @@ ember install ember-flexberry-infinite-scroll * infiniteModel - название модели, чьи свойства будут отображены на списке. * estimateRowHeight - высота ячеек таблицы компонента. * bufferSize - сколько дополнительных строк (сверх видимых) должно быть загружено и отображено (помогает сгладить переходы между страницами и обеспечивает более плавную прокрутку). + +В контроллере прописываем модель и экшен догрузки. Контроллер может выглядеть так: + +```js +import Controller from '@ember/controller'; +import { computed } from '@ember/object'; +import Builder from 'ember-flexberry-data/query/builder'; + +export default Controller.extend({ + + infiniteModel: computed('model', function() { + return this.get('model').toArray(); + }), + + actions: { + lastReached() { + let infiniteModel = this.get('infiniteModel'); + if (this.get('model.meta.count') > infiniteModel.length) { + const modelName = this.get('modelName'); + const projectionName = this.get('projectionName'); + const store = this.store; + const builder = new Builder(store) + .from(modelName) + .selectByProjection(projectionName) + .top(15) + .skip(infiniteModel.length) + .orderBy('name asc') + .count(); + + return store.query(modelName, builder.build()).then((result) => { + infiniteModel.pushObjects(result.toArray()); + }); + } + } + } +}); +``` From 0da0a0577e4608ef8a02eaf53135f62a9029f9f7 Mon Sep 17 00:00:00 2001 From: Svetlana Date: Thu, 18 Jul 2024 15:57:11 +0500 Subject: [PATCH 3/5] updte with additional info --- .../ef3_ember_flexberry_infinite_scroll.ru.md | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md b/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md index 6ef5e6ea2..4c9e88ce1 100644 --- a/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md +++ b/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md @@ -36,12 +36,17 @@ ember install ember-flexberry-infinite-scroll где: -* modelProjection - название проекции, где определены отображаемые на списке свойства модели. -* infiniteModel - название модели, чьи свойства будут отображены на списке. -* estimateRowHeight - высота ячеек таблицы компонента. -* bufferSize - сколько дополнительных строк (сверх видимых) должно быть загружено и отображено (помогает сгладить переходы между страницами и обеспечивает более плавную прокрутку). +* `modelProjection` - объект проекции, где определены отображаемые на списке свойства модели. +* `infiniteModel` - массив записей из модели, отображаемых в данных момент. +* `estimateRowHeight` - высота ячеек таблицы компонента. +* `bufferSize` - сколько дополнительных строк (сверх видимых) должно быть загружено и отображено (помогает сгладить переходы между страницами и обеспечивает более плавную прокрутку). -В контроллере прописываем модель и экшен догрузки. Контроллер может выглядеть так: +В контроллере прописываем вычислимое свойство записей модели и экшен догрузки `lastReached`. + +Событие `lastReached` срабатывает, когда пользователь прокручивает таблицу до последней видимой строки. +Это позволяет обнаружить, когда пользователь достиг конца таблицы, и загрузить дополнительные данные, чтобы продолжить отображение. + +Контроллер может выглядеть так: ```js import Controller from '@ember/controller'; @@ -58,8 +63,8 @@ export default Controller.extend({ lastReached() { let infiniteModel = this.get('infiniteModel'); if (this.get('model.meta.count') > infiniteModel.length) { - const modelName = this.get('modelName'); - const projectionName = this.get('projectionName'); + const modelName = this.get('modelName'); // название модели строкой + const projectionName = this.get('projectionName'); // название проекции строкой const store = this.store; const builder = new Builder(store) .from(modelName) From 9ad37abfbc53a250b4912c443fc0383b1c66fda6 Mon Sep 17 00:00:00 2001 From: Svetlana Date: Thu, 18 Jul 2024 16:49:01 +0500 Subject: [PATCH 4/5] add link to addon --- .../additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md b/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md index 4c9e88ce1..4c93eca8f 100644 --- a/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md +++ b/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md @@ -10,7 +10,7 @@ summary: Описание аддона Ember flexberry infinite scroll ## Описание аддона -`ember-flexberry-infinite-scroll` - аддон для [ember-flexberry](https://github.com/Flexberry/ember-flexberry/tree/develop) с компонентом бесконечной прокрутки. +[`ember-flexberry-infinite-scroll`](https://github.com/Flexberry/ember-flexberry-infinite-scroll) - аддон для [ember-flexberry](https://github.com/Flexberry/ember-flexberry/tree/develop) с компонентом бесконечной прокрутки. ## Установка From 034cdd622871bb931427e2b1bd937ba4e28bc234 Mon Sep 17 00:00:00 2001 From: Svetlana Date: Wed, 28 Aug 2024 02:07:13 +0500 Subject: [PATCH 5/5] code review --- .../ef3_ember_flexberry_infinite_scroll.ru.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md b/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md index 4c93eca8f..a50822167 100644 --- a/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md +++ b/pages/products/flexberry-ember/3.x/additional-addons/ef3_ember_flexberry_infinite_scroll.ru.md @@ -18,13 +18,14 @@ summary: Описание аддона Ember flexberry infinite scroll ember install ember-flexberry-infinite-scroll ``` -Требуется версия node 12 или выше. +> Требуется версия node 12 или выше. ## Использование В шаблоне для использования компонента прописать: ```hbs +{% raw %} {{flexberry-infinite-scroll modelProjection=modelProjection content=infiniteModel @@ -32,6 +33,7 @@ ember install ember-flexberry-infinite-scroll estimateRowHeight=20 bufferSize=1 }} +{% endraw %} ``` где: