如何将CanJS与VelocityJS结合使用？

Question

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

我想知道，每次删除速度组件以回答问题并插入新问题时，如何使用quizz-question进行转换？

任何帮助都是非常感谢的！

Answer 1

在更改数据上使用转换的一个关键元素是，在从DOM中删除元素之前，转换必须完成(这将立即从显示中删除元素)。

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

对于淡入和淡出的例子，设置要放在转换容器中的内容应该使用异步设置器(带有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