Как использовать CanJS с VelocityJS? - PullRequest
Новая
       26

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

0 голосов
/ 10 мая 2018

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

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

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

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

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

    <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

0 голосов
/ 16 мая 2018

Ключевой элемент с использованием переходов при изменении данных состоит в том, что переход должен быть завершен перед удалением элемента из 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> и некоторые манипуляции с данными.

...