Как написать аналог ng-repeat?

Question

[Coder321]

Как написать аналог ng-repeat b на нативном js. Если точнее, то у меня есть таблица и нужно в ней дипамически менять информацию. И сделать это нужно на нативном js.

Comments

[Владимир]

А при чем тут оба ангуляра ?

[lega]

ng-repeat написан на нативном js как и сам ангуляр

[lega]

Не нравиться ангуляр возьмите что-нить полегче

Answer 1

[Александр Земляной]

Существует плагин DataTables, есть как jquery так и нативная реализация. Подумай стоит ли изобретать велосипед.

Comments

[Coder321]

Вопрос в том что бы понять как такое сделать на чистом js без библиотек

[Александр Земляной]

Ну тогда 1 открыть angular на github и посмотреть как там сделано.
Теоретически разбиваем задачу на модули.
1. Парсинг html таблицы в js объект.
2. Рендер таблицы из js объекта.
3. Вотчер который будет следить за изменениями в объекте и вызывать рендер.

Далее много заморочек с оптимизацией всего. например перерисовывать всю таблицу если добавилась 1 строка это избыточно. или держать копию объекта для сравнения в вотчере на каждой итерации это ооочень медленно.

[Coder321]

Александр Земляной: Первый раз вывести инфу не проблема. Мне нужно добавить пагинацию на таблицу. Что лучше и правильнее, при смене табицы перерисововать body таблицы или заменять в ней данные?

[Александр Земляной]

«перерисововать body таблицы или заменять в ней данные» - фиг знает я не задавался таким вопросом. надо написать и так и так а потом замерять console.time() что быстрее.
«Мне нужно добавить пагинацию на таблицу» - ну тут slice(0, 10) твоего массива с данными, и рисуешь только вырезанные 10 рядов. вторая страница slice(10, 20) ну и тд. и тп.
«Первый раз вывести инфу не проблема. » - в angular все завязано на бесконечный цикл, который бегает и проверяет надо ли что-делать или нет, чем то похоже на прерывания в cpu. Вот статья на эту тему https://habrahabr.ru/post/250637/

[Александр Земляной]

Чтобы не плодить дополнительных вопросов, для вашей задумки требуется изучить статьи на тему,
MVC в JavaSctipt, реактивное программирование javascript, связывание данных javascript

[Coder321]

Александр Земляной: спасибо, буду что то пробовать

Answer 2

[Archakov Dennis]

Попробуй это Monkberry

Comments

[Coder321]

Хочу именнр сам сделать и на нативном без библиотек

[Алексей Ярков]

Coder321:

Хочу именно сам сделать и на нативном без библиотек

Ну так делайте )) Вам же подсказали - смотрим в репозитории как и повторяем

[Archakov Dennis]

Алексей Ярков: +