如何将 CanJS 与 VelocityJS 一起使用？

Question

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

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

感谢任何帮助！

Answer 1

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

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

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

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

对于 quizz-question 组件，您希望在 fade-in 中的 div 内呈现整个组件。可能还有一种方法可以使用例如将其概括为高阶组件<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

如何将 CanJS 与 VelocityJS 一起使用？

How to use CanJS with VelocityJS?

javascript

mvvm

canjs

velocity.js

canjs-component