我如何强制 Aurelia 更新 DOM?
How can I force Aurelia updating the DOM?
我正在 Aurelia(Angular 版本在这里:http://www.ashware.nl/pentomino)重建这个 pentomino 积木拼图,因为我无法在 Angular 中达到我想要的效果。益智游戏运行良好,但自动解算器 - 计算谜题所有可能解决方案(有很多)的服务非常繁忙,以至于 Aurelia 没有更新 DOM。
我正在构建的服务 (solver-service.js) 主要由一个函数组成,该函数试图在板上安装一个块(在所有可能的位置)。当它成功时,它递归地调用自己来适应下一个块,当它被卡住时它使用回溯。
我尝试了几种方法来反映视图中求解器的模型更改,最新的方法是 'signal' 来触发用于拼图块(五联骨牌)定位和方向的值转换器。
我尝试了微任务来反映 aurelia 生命周期中的变化,requestAnimationFrame() 并承诺在 .then() 部分执行下一步,但这会使流程异步,从而破坏了回溯机制这里。
罪魁祸首可能是我使用双(嵌套)repeat.for 来渲染块。
当我在检查器中中断执行时,Aurelia 确实更新了视图,但只更新了 repeat.for 的第一层,所以位置更新了,但块的方向/旋转没有更新,这由二级反映。
代码可以在这里查看:https://github.com/Esger/Pentominos2/tree/feature/solver
那么让 Aurelia 在繁重的计算过程中始终更新视图的最佳方法是什么? - 我想连续展示解题过程
网络工作者成功了! :) 我将求解器服务放在一个 web worker 中,一个单独的线程,这样 Aurelia 就不会再被它的繁重计算所阻塞。
worker 时不时或找到解决方案时向主线程发送数据。完美!
仍然存在一个问题:Aurelia 确实使用工作人员找到的块的位置更新视图,但仅当我单击或尝试滚动页面时 - 我必须继续这样做才能持续看到更新。
因此单击并滚动页面会触发 Aurelia 更新视图。如果它能自己做到这一点就更好了。感谢@jeffG 的指导。
我正在 Aurelia(Angular 版本在这里:http://www.ashware.nl/pentomino)重建这个 pentomino 积木拼图,因为我无法在 Angular 中达到我想要的效果。益智游戏运行良好,但自动解算器 - 计算谜题所有可能解决方案(有很多)的服务非常繁忙,以至于 Aurelia 没有更新 DOM。
我正在构建的服务 (solver-service.js) 主要由一个函数组成,该函数试图在板上安装一个块(在所有可能的位置)。当它成功时,它递归地调用自己来适应下一个块,当它被卡住时它使用回溯。 我尝试了几种方法来反映视图中求解器的模型更改,最新的方法是 'signal' 来触发用于拼图块(五联骨牌)定位和方向的值转换器。
我尝试了微任务来反映 aurelia 生命周期中的变化,requestAnimationFrame() 并承诺在 .then() 部分执行下一步,但这会使流程异步,从而破坏了回溯机制这里。 罪魁祸首可能是我使用双(嵌套)repeat.for 来渲染块。
当我在检查器中中断执行时,Aurelia 确实更新了视图,但只更新了 repeat.for 的第一层,所以位置更新了,但块的方向/旋转没有更新,这由二级反映。
代码可以在这里查看:https://github.com/Esger/Pentominos2/tree/feature/solver
那么让 Aurelia 在繁重的计算过程中始终更新视图的最佳方法是什么? - 我想连续展示解题过程
网络工作者成功了! :) 我将求解器服务放在一个 web worker 中,一个单独的线程,这样 Aurelia 就不会再被它的繁重计算所阻塞。 worker 时不时或找到解决方案时向主线程发送数据。完美!
仍然存在一个问题:Aurelia 确实使用工作人员找到的块的位置更新视图,但仅当我单击或尝试滚动页面时 - 我必须继续这样做才能持续看到更新。
因此单击并滚动页面会触发 Aurelia 更新视图。如果它能自己做到这一点就更好了。感谢@jeffG 的指导。