如何将 CanJS 与 VelocityJS 一起使用？答案

【问题标题】：How to use CanJS with VelocityJS?如何将 CanJS 与 VelocityJS 一起使用？
【发布时间】：2018-10-20 02:29:52
【问题描述】：

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

我想知道每次为已回答的问题删除quizz-question 组件并为新问题插入时如何使用velocityjs 进行转换？

感谢任何帮助！

【问题讨论】：

你使用的是什么版本的 CanJS？它可能不会影响答案，但我想从 JSBin 的正确版本开始。
CanJS 4.x 谢谢 :)
它最终确实影响了答案，至少是 JSBin 中的设置。 :)

标签： javascript mvvm velocity.js canjs canjs-component

【解决方案1】：

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

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

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

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

对于quizz-question 组件，您需要在fade-in 的div 内呈现整个组件。可能还有一种方法可以使用例如将其概括为高阶组件。 <div class="fade-in"><content /></div> 和一些数据操作。

【讨论】：

非常感谢您提供的详细信息和 jsbin，非常感谢 :)
对于元素移除以外的动画事件，我会使用on:event:by:obj="animate()"事件绑定来运行动画。

【解决方案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

【讨论】：