Ember JS入门 - 屏幕闪烁

时间:2017-06-12 23:17:26

标签: javascript google-chrome ember.js ember-cli single-page-application

我目前正在阅读Ember 2.13的getting started指南。

我已经完成了添加第一条路线的步骤:/scientists路线。我很担心,因为当我访问该网址时,屏幕会闪烁,我根本不会发现这样的基本SPA会发生的事情。

我添加了一个链接here,在更改网址时展示了闪烁。

我是否对Chrome中的重新绘制有误解?因为在Safari中似乎工作正常。但我倾向于认为这是因为一些Safari优化,而不是Ember在Safari中的工作,而不是Chrome。

我正在使用ember serve命令。它还说没有安装watchman,但由于这仅仅是为了发现文件更改,我认为它不会对此产生影响。

1 个答案:

答案 0 :(得分:3)

它闪烁的原因是因为如果您手动更改URL并按Enter键,则会导致页面重新加载(这会导致Ember应用程序重新初始化)。要在路由之间无缝转换(没有闪烁/页面重新加载),您需要使用Ember的{{link-to}}帮助程序。 {{link-to}}帮助器不会导致页面重新加载,只是转换到新路由,与手动更改URL不同。

controllerrouter上下文中,还有其他方法可以执行此操作。主要是Route#transitionToController#transitionToRoute

在Ember应用程序中进行路由时,应始终使用上述方法之一。确保您没有使用<a>代码或更改window.location。这些方法可行,但它会在重新获取和初始化Ember应用程序时引起明显的闪烁。

实际上,watchman是一项可选升级,可以缩短检测文件更改所需的时间/可靠性。它不应该影响你描述的闪烁。