- PVSM.RU - https://www.pvsm.ru -
Анимация и драг-н-дроп на Метеоре [1] пока больше мечта чем реальность. Умельцы находят пути реализовать такие вещи, но как показывает исследование — это обход основных паттернов метеор разработки
Этот пост о том, как я пытался прикрутить анимацию и сортировку к известному примеру todos [2].
Разработчики метеора обещают [3], что работают над возможностью использования JQuery-UI Sortable [4] или его подобия. Но я пока не нашел как это потрогать руками.
А вот с анимацией пока света не видно. Вот что пишет [5] об этом Tom Coleman:
I think there is a big need for such a widget, done in a meteoric way. It's on my personal radar (but so are a lot of things, including a nice way to re-order with animation).
Так случилось, что мне это было надо на вчера, поэтому я попробовал посмотреть, в чем же там трудности реализации.
Если вкратце, то пару дней исследований и экспериментов вылились в код на гитхабе: meteor-todos-sortable-animation [6]. Там я постарался детально описать как его использовать.
Можно посмотреть демо [7].
В частности там работает:
Разработка начиналась для тудушек. После завершения за 10 минут мне удалось прикрутить то же для списка листов. Собственно ради быстрого реюза это и делалось.
Основной баг, от которого я не смог избавиться — невозможность перерендерить созданный через Meteor.render
шаблон. Если данные изменились — код удаляет старый фрагмет и создает новый. Из-за это не работают preserve
фичи.
Много проблем было с аккуратными изменениями DOM элементов. И Meteor, и Sortable работают с DOM весьма динамично, пришлось их подружить.
Одно из основных ноу хау решения — использование инкрементального изменения DOM вслед за последовательными сигналами об изменениях от Meteor cursor observer
.
При этом для решения конфликтов работы с DOM между Meteor и Sortable, учитывая задержки анимации, создается очередь событий. Очередь блокирует изменения и последовательно выполняет одно изменение за другим.
Таким образом это симулирует те же последовательные изменения, что бы делал Meteor сам, но с задержками для анимации.
В первую очередь следует заметить, что получился относительно быстрый способ прикрутить драг-н-дроп и анимацию к спискам.
Я рассчитываю, что это решение, хоть и является хаком, но все же максимально приближено к метеор паттерну. А это означает, что когда Meteor будет уметь делать то же сам, то переделать готовый код большого приложения с хаками на штатную схему без хаков будет несложно.
В процессе разработки я сталкивался с весьма сложно отлавливаемыми багами. Возможно поймал не все. Желающих прошу потестить. Буду рад, если решение рассмотрят более опытные разработчики, которые подскажут как его улучшить.
Автор: nazar_leush
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/45536
Ссылки в тексте:
[1] Метеоре: http://www.meteor.com/
[2] todos: http://www.meteor.com/examples/todos
[3] обещают: http://www.meteor.com/blog/2013/09/13/previewing-meteors-new-rendering-engine-reactive-sortable-lists
[4] JQuery-UI Sortable: http://jqueryui.com/sortable/
[5] пишет: http://stackoverflow.com/questions/13214686/drag-and-drop-sortable-list-in-meteor
[6] meteor-todos-sortable-animation: https://github.com/nleush/meteor-todos-sortable-animation
[7] демо: http://todos-dnd-animated.meteor.com/
[8] Источник: http://habrahabr.ru/post/197296/
Нажмите здесь для печати.