1

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

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

任何帮助表示赞赏！

4

2 回答 2

3

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

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

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

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

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

于 2018-05-16T02:28:22.767 回答
1

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

    <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

于 2018-05-17T18:15:55.883 回答