Как использовать CanJS с VelocityJS?

Я использую CanJS (со StealJS) для создания приложения викторины, и у меня есть quizz-question компонент, который отображается для каждого вопроса!

Интересно, как сделать переход с speedjs каждый раз quizz-question компонент удален для ответа на вопрос и вставлен для нового вопроса?

Любая помощь приветствуется!

Источник

2 ответа

Решение

Ключевой элемент с использованием переходов при изменении данных заключается в том, что переход должен быть завершен перед удалением элемента из DOM (что немедленно приведет к удалению элемента из отображения).

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

Для примера постепенного появления и исчезновения, установка содержимого для помещения в контейнер перехода должна использовать асинхронный установщик (с val а также resolve аргументы), чтобы заставить переход работать правильно. Сначала исчезните (и используйте возвращенное обещание ждать), затем обновите разметку новым содержимым (используя resolve()), затем постепенно. Я сделал JSBin, который демонстрирует эту концепцию, хотя содержание внутри перехода очень просто в демонстрации.

https://jsbin.com/lesagebomu/edit?html,js,output

В случае quizz-question компонент, вы хотите визуализировать весь компонент внутри div в fade-in, Вероятно, есть также способ обобщить это в компонент более высокого порядка, используя, например, <div class="fade-in"><content /></div> и некоторые манипуляции с данными.

Источник

Другим способом сделать это будет отправка событий для добавляемых и удаляемых элементов, а затем прослушивание этих событий в представлении:

    <li on:click="../removeQuestion(question)"
        on:removing:by:question="fadeOut()"
        on:inserting:by:question="fadeIn()">{{question.name}}</li>

Вы можете увидеть это здесь: https://jsbin.com/lepuxaq/edit?html,js,output

Источник
Другие вопросы по тегам