Introduces a new Link
primitive to pass around self-contained references toroutes, like URLs, but with state (isActive
, ...) and methods (transitionTo
,...). Also brings along an accompanying template helper and component for easyusage in templates.
ember-link
does to routing whatember-concurrency
did to asynchrony!
ember install ember-link
�� This is an Ember Octane addon. For a version that is compatiblewith older versions of Ember check out the0.x
series.
�� You are viewing the docs for an improved & refactored release (^1.1.0
),that is 100 % backwards compatible to the1.0.0
version you're usedto. There's no reason not to upgrade.✨
{{link}}
HelperThe {{link}}
helper returns a UILink
instance.
When passing a single model, you can use model
instead of models
:
You can also mix and match the parameter styles, however you like.
fromURL
Instead of the positional & named link parameters described above, you can alsocreate a Link
instance from a serialized URL.
fromURL
is mutually exclusive with the other link parameters: route
, model
& models
, query
In addition to the parameters shown above, the {{link}}
helper also accepts apreventDefault
default parameter. It defaults to true
and intelligentlyprevents hard browser transitions when clicking <a>
elements.
See @preventDefault
and UILink
.
Instead of using the {{#let}}
helper, you can use the<Link>
component to achieve the same scoping effect, withsubjectively nicer syntax.
Even better yet, make Link
/ UILink
a first-classprimitive in your app architecture! Instead of manually wiring upLink#url
and Link#transitionTo()
every time, rathercreate your own ready-to-use, style-guide-compliant link and button componentsthat accept @link
as an argument instead of @href
and @onClick
.
This is akin to thepopularasynctaskbutton component concept.
<Link>
ComponentSimilar to the the {{link}}
helper, the <Link>
componentyields a UILink
instance.
@route
Required.
The target route name.
Example
{{link-to}}
equivalent
@models
Optional. Mutually exclusive with @model
.
An array of models / dynamic segments.
Example
{{link-to}}
equivalent
@model
Optional. Mutually exclusive with @models
.
Shorthand for providing a single model / dynamic segment. The following twoinvocations are equivalent:
@query
Optional.
Query Params object.
Example
{{link-to}}
equivalent
@fromURL
Optional. Mutually exclusive with @route
, @model
/@models
, @query
.
Example
@preventDefault
Optional. Default: true
If enabled, the transitionTo
andreplaceWith
actions will try to callevent.preventDefault()
on the first argument, if it is anevent. This is an anti-foot-gun to make <Link>
just work
<a>
and<button>
, which would otherwise trigger a native browser navigation / formsubmission.
The <Link>
component yields a UILink
instance.
url
string
The URL for this link that you can pass to an <a>
tag as the href
attribute.
isActive
boolean
Whether this route is currently active, including potentially supplied modelsand query params.
In the following example, only one link will be is-active
at any time.
isActiveWithoutQueryParams
boolean
Whether this route is currently active, including potentially supplied models,but ignoring query params.
In the following example, the first two links will be is-active
simultaneously.
isActiveWithoutModels
boolean
Whether this route is currently active, but ignoring models and query params.
In the following example, both links will be is-active
simultaneously.
transitionTo()
(event?: Event) => Transition
Transition into the target route.
If @preventDefault
is enabled, also calls event.preventDefault()
.
replaceWith()
(event?: Event) => Transition
Transition into the target route while replacing the current URL, if possible.
If @preventDefault
is enabled, also calls event.preventDefault()
.
Link
A Link
is a self-contained reference to a concrete route, including models andquery params. It's basically like a<LinkTo>
/ {{link-to}}
component you can pass around.
You can create a Link
via the LinkManager
service.
UILink
extends Link
with some anti-foot-guns and conveniences. Itcan also be created via the LinkManager
service, but also viathe {{link}}
helper and <Link>
component.
isActive
Type: boolean
Whether this route is currently active, including potentially supplied modelsand query params.
isActiveWithoutQueryParams
Type: boolean
Whether this route is currently active, including potentially supplied models,but ignoring query params.
isActiveWithoutModels
Type: boolean
Whether this route is currently active, but ignoring models and query params.
url
Type: string
The URL for this link that you can pass to an <a>
tag as the href
attribute.
routeName
Type: string
The target route name of this link.
models
Type: RouteModel[]
The route models passed in this link.
queryParams
Type: Record<string, unknown> | undefined
The query params for this link, if specified.
transitionTo()
Returns: Transition
Transition into the target route.
replaceWith()
Returns: Transition
Transition into the target route while replacing the current URL, if possible.
UILink
UILink
extends Link
with anti-foot-guns and conveniences. Thisclass is meant to be used in templates, primarily through <a>
& <button>
elements.
It wraps transitionTo()
and replaceWith()
to optionally accept an event
argument. It will intelligently
event.preventDefault()
to prevent hard page reloadsCmd
/ Ctrl
clickingIt can be created via the LinkManager
service, but also viathe {{link}}
helper and <Link>
component.
LinkManager
The LinkManager
service is used by the {{link}} helper
and<Link>
component to create UILink
instances.
You can also use this service directly to programmatically create linkreferences.
createLink(linkParams: LinkParams): Link
Returns: Link
interface LinkParams {
/**
* The target route name.
*/
route: string;
/**
* Optional array of models / dynamic segments.
*/
models?: RouteModel[];
/**
* Optional query params object.
*/
query?: QueryParams;
}
createUILink(linkParams: LinkParams, uiParams: UILinkParams): UILink
Returns: UILink
interface UILinkParams {
/**
* Whether or not to call `event.preventDefault()`, if the first parameter to
* the `transitionTo` or `replaceWith` action is an `Event`. This is useful to
* prevent links from accidentally triggering real browser navigation or
* buttons from submitting a form.
*
* Defaults to `true`.
*/
preventDefault?: boolean;
}
getLinkParamsFromURL(url: string): LinkParams
Returns: LinkParams
Use this method to derive LinkParams
from a serialized, recognizable URL, thatyou can then pass into createLink
/ createUILink
.
In acceptance / application tests (setupApplicationTest(hooks)
)your app boots with a fully-fledged router, so ember-link
just works normally.
In integration / render tests (setupRenderingTest(hooks)
) therouter is not initialized, so ember-link
can't operate normally. To stillsupport using {{link}}
& friends in render tests, you can use thesetupLink(hooks)
test helper.
import { click, render } from '@ember/test-helpers';
import { setupRenderingTest } from 'ember-qunit';
import { module, test } from 'qunit';
import { setupLink, linkFor, TestLink } from 'ember-link/test-support';
import hbs from 'htmlbars-inline-precompile';
module('`setupLink` example', function (hooks) {
setupRenderingTest(hooks);
setupLink(hooks);
test('`<Link>` component works in render tests', async function (assert) {
await render(hbs`
<Link @route="some.route" as |l|>
<a
href={{l.url}}
class={{if l.isActive "is-active"}}
{{on "click" l.transitionTo}}
>
Click me
</a>
</Link>
`);
const link = linkFor('some.route');
link.onTransitionTo = assert.step('link clicked');
await click('a');
assert.verifySteps(['link clicked']);
});
});
ember-engine-router-service
:Allows you to use ember-link
inside enginesember-router-helpers
ember-teach Ember Teach博客文章md文件。网址:http://xcoding.tech/tags/Emberjs/ 目录 第一章 对象模型 类的定义、初始化、继承 类的扩展(reopen) 计算属性(compute properties) 观察者(observer) 绑定(bingding) 枚举(enumerables) 对象模型小结 第二章 模板 handlebars基础
概述 本文将介绍zigbee应用程序中重要的参数与其对应的RAM开销,实际产品开发中,可根据芯片的RAM空间以及性能需求,对各个参数进行调整,已达到节约RAM的目的。 重要参数/宏定义介绍 参数名称 默认值 占用RAM字节 EMBER_PACKET_BUFFER_COUNT 75
Ember检查器是一个浏览器插件,用于调试Ember应用程序。 灰烬检查员包括以下主题 - S.No. 灰烬检查员方式和描述 1 安装Inspector 您可以安装Ember检查器来调试您的应用程序。 2 Object Inspector Ember检查器允许与Ember对象进行交互。 3 The View Tree 视图树提供应用程序的当前状态。 4 检查路由,数据选项卡和库信息 您可以看到检查
英文原文: http://emberjs.com/guides/getting-ember/index/ Ember构建 Ember的发布管理团队针对Ember和Ember Data维护了不同的发布方法。 频道 最新的Ember和Ember Data的 Release,Beta 和 Canary 构建可以在这里找到。每一个频道都提供了一个开发版、最小化版和生产版。更多关于不同频道的信息可以查看博客
Ember Link Action Ember addon. Fire action when LinkTo transitions to other route. OK for SEO solution. Usage Octane You can pass an action as @invokeAction attribute of LinkTo component: <LinkTo @rou
ember-emojione ember-emojione is your emoji solution for Ember, based on the EmojiOne project. EmojiOne version 2 is used, which is free to use for everyone (CC BY-SA 4.0), you're only required to giv
Ember 3D Ember 3D is an Ember addon for using Three.js - an easy to use, lightweight, javascript 3D library. It is designed to: Prescribe a solid file structure to Three.js code using ES6 modules. Ena
Ember Table An addon to support large data set and a number of features around table. Ember Table canhandle over 100,000 rows without any rendering or performance issues. Ember Table 3.x supports: Emb