Question

我正在使用CanJS（使用StealJS）构建一个quizz应用程序，我为每个问题都有quizz-question个组件！

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

感谢任何帮助！

Answer 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>和一些数据操作。

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一起使用？

2 个答案: