如何在VelocityJS中使用CanJS？

Question

我正在使用CanJS（与StealJS一起）构建测验应用程序，并且具有针对每个问题呈现的测验quizz-question组件！

我不知道如何使过渡velocityjs每次quizz-question组件的answerd问题取出并插入新的问题？

任何帮助表示赞赏！

Answer 1

在更改数据时使用过渡的一个关键元素是过渡必须在从DOM中删除元素之前完成（这将立即将元素从显示中移除）。

据我所知，CanJS没有在删除节点之前等待进程的机制，因此适当的解决方法是在内容更改时不删除节点。 您可以在该节点内部构造标记，但是必须在永久节点上进行Velocity转换才能使转换成功。

对于淡入和淡出的示例，将内容设置为放入过渡容器中应使用异步设置器（带有val和resolve参数）以使过渡正常工作。 首先淡出（并使用返回的Promise等待），然后使用新内容更新标记（使用resolve() ），然后淡入。我制作了一个JSBin来演示此概念，尽管过渡中的内容非常简单在演示中。

https://jsbin.com/lesagebomu/edit?html,js，输出

如果是quizz-question组件，则需要将整个组件呈现为fade-in 。 也许还有一种使用<div class="fade-in"><content /></div>和一些数据操作将其概括为高阶组件的方法。

Answer 2

另一种方法是在要添加和删除的元素上调度事件，然后在视图中侦听这些事件：

    <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