为什么我应该在 EmberJS 中使用 {{#link-to}} 而不是 <a></a>?
Why should I use {{#link-to}} instead of <a></a> in EmberJS?
这是一个新手问题。但是,在 EmberJS 中,我发现这两种方法都适用于 linking 到我的应用程序中的博客页面。
<p>{{#link-to 'posts'}} See my blog{{/link-to}}</p>
<a href="posts"> See my blog</a>
在 EmberJS 中使用 {{link-to}} 更好吗?怎么会?
区别在于{{link-to}}
组件会导航到当前运行ningEmber应用中的指定路由,而<a href="posts">
会做一个新的浏览器请求到该位置并在该路线重新启动您的 Ember 应用程序。您应该使用 {{link-to}}
,因为您将使用 Ember 内部结构在单页应用程序中导航,这将是更流畅的用户体验。
虽然它们都可以工作,但请仔细观察您的浏览器,您会看到锚标记会让您刷新页面并重新启动您的 Ember 应用(虽然在正确的位置)。使用 {{link-to}}
会感觉更快,因为 Ember 通过 javascript 呈现新页面,而不是在页面刷新后重新启动。这是在 内 单页应用程序导航和从外部页面跳转到 SPA 之间的区别。
虽然 Ember 确实在 运行 时呈现锚标记代替 {{link-to}}
,但它会插入以停止默认锚标记行为。文档是这样解释的:
By default the {{link-to}}
component prevents the default browser
action by calling preventDefault()
as this sort of action bubbling is
normally handled internally and we do not want to take the browser to
a new URL (for example).
(来自 https://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_allowing-default-action)
此外,使用 {{link-to}}
组件,您可以将模型直接传递到路线中。这有点高级,但是 Ember 指南有一些很好的例子。
https://guides.emberjs.com/v2.13.0/templates/links/
这是一个新手问题。但是,在 EmberJS 中,我发现这两种方法都适用于 linking 到我的应用程序中的博客页面。
<p>{{#link-to 'posts'}} See my blog{{/link-to}}</p>
<a href="posts"> See my blog</a>
在 EmberJS 中使用 {{link-to}} 更好吗?怎么会?
区别在于{{link-to}}
组件会导航到当前运行ningEmber应用中的指定路由,而<a href="posts">
会做一个新的浏览器请求到该位置并在该路线重新启动您的 Ember 应用程序。您应该使用 {{link-to}}
,因为您将使用 Ember 内部结构在单页应用程序中导航,这将是更流畅的用户体验。
虽然它们都可以工作,但请仔细观察您的浏览器,您会看到锚标记会让您刷新页面并重新启动您的 Ember 应用(虽然在正确的位置)。使用 {{link-to}}
会感觉更快,因为 Ember 通过 javascript 呈现新页面,而不是在页面刷新后重新启动。这是在 内 单页应用程序导航和从外部页面跳转到 SPA 之间的区别。
虽然 Ember 确实在 运行 时呈现锚标记代替 {{link-to}}
,但它会插入以停止默认锚标记行为。文档是这样解释的:
By default the
{{link-to}}
component prevents the default browser action by callingpreventDefault()
as this sort of action bubbling is normally handled internally and we do not want to take the browser to a new URL (for example).
(来自 https://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_allowing-default-action)
此外,使用 {{link-to}}
组件,您可以将模型直接传递到路线中。这有点高级,但是 Ember 指南有一些很好的例子。
https://guides.emberjs.com/v2.13.0/templates/links/