当前位置: 首页 > 软件库 > 程序开发 > >

ember-link

授权协议 MIT License
开发语言 JavaScript
所属分类 程序开发
软件类型 开源软件
地区 不详
投 递 者 姜嘉良
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ember-link

CI

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 what ember-concurrency did to asynchrony!

/r/whatjawsdid

Installation

ember install ember-link

�� This is an Ember Octane addon. For a version that is compatiblewith older versions of Ember check out the 0.x series.

�� You are viewing the docs for an improved & refactored release (^1.1.0),that is 100 % backwards compatible to the 1.0.0 version you're usedto. There's no reason not to upgrade.

Usage

{{link}} Helper

The {{link}} helper returns a UILink instance.

Invocation Styles

Positional Parameters
{{#let
  (link
    "blogs.posts.post"
    @post.blog.id
    @post.id
    (query-params showFullPost=true)
  )
  as |l|
}}
  <a href={{l.url}} {{on "click" l.transitionTo}}>
    Read the full "{{@post.title}}" story on our {{@post.blog.name}} blog!
  </a>
{{/let}}
Named Parameters
{{#let
  (link
    route="blogs.posts.post"
    models=(array @post.blog.id @post.id)
    query=(hash showFullPost=true)
  )
  as |l|
}}
  <a href={{l.url}} {{on "click" l.transitionTo}}>
    Read the full "{{@post.title}}" story on our {{@post.blog.name}} blog!
  </a>
{{/let}}

When passing a single model, you can use model instead of models:

{{#let
  (link
    route="blogs.posts"
    model=@post.blog.id
  )
  as |l|
}}
  <a href={{l.url}} {{on "click" l.transitionTo}}>
    Read more stories in the {{@post.blog.name}} blog!
  </a>
{{/let}}
Mix & Match

You can also mix and match the parameter styles, however you like.

{{#let
  (link
    "blogs.posts.post"
    @post.blog.id
    @post.id
    query=(hash showFullPost=true)
  )
  as |l|
}}
  <a href={{l.url}} {{on "click" l.transitionTo}}>
    Read the full "{{@post.title}}" story on our {{@post.blog.name}} blog!
  </a>
{{/let}}
fromURL

Instead of the positional & named link parameters described above, you can alsocreate a Link instance from a serialized URL.

{{! someURL = "/blogs/tech/posts/dont-break-the-web" }}
{{#let (link fromURL=this.someURL) as |l|}}
  <a href={{l.url}} {{on "click" l.transitionTo}}>
    Read the next great post.
  </a>
{{/let}}

fromURL is mutually exclusive with the other link parameters: route, model& models, query

Parameters

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.

�� Pro Tips

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.

<Ui::LinkButton @link={{link "subscribe"}}>
  Become a Premium member
</Ui::LinkButton>
<a
  href={{@link.url}}
  class="btn"
  {{on "click" @link.transitionTo}}
  ...attributes
>
  {{yield}}
</a>

<Link> Component

Similar to the the {{link}} helper, the <Link> componentyields a UILink instance.

<Link
  @route="some.route"
  @models={{array 123}}
  @query={{hash foo="bar"}}
as |l|>
  <a
    href={{l.url}}
    class={{if l.isActive "is-active"}}
    {{on "click" l.transitionTo}}
  >
    Click me
  </a>
</Link>

Arguments

@route

Required.

The target route name.

Example

<Link @route="some.route" as |l|>
  <a
    href={{l.url}}
    class={{if l.isActive "is-active"}}
    {{on "click" l.transitionTo}}
  >
    Click me
  </a>
</Link>

{{link-to}} equivalent

{{#link-to "some.route"}}
  Click me
{{/link-to}}
@models

Optional. Mutually exclusive with @model.

An array of models / dynamic segments.

Example

<Link @route="some.route" @models={{array someModel someNestedModel}} as |l|>
  <a
    href={{l.url}}
    class={{if l.isActive "is-active"}}
    {{on "click" l.transitionTo}}
  >
    Click me
  </a>
</Link>

{{link-to}} equivalent

{{#link-to "some.route" someModel someNestedModel}}
  Click me
{{/link-to}}
@model

Optional. Mutually exclusive with @models.

Shorthand for providing a single model / dynamic segment. The following twoinvocations are equivalent:

<Link @route="some.route" @model={{someModel}} />
<Link @route="some.route" @models={{array someModel}} />
@query

Optional.

Query Params object.

Example

<Link @route="some.route" @query={{hash foo="bar"}} as |l|>
  <a
    href={{l.url}}
    class={{if l.isActive "is-active"}}
    {{on "click" l.transitionTo}}
  >
    Click me
  </a>
</Link>

{{link-to}} equivalent

{{#link-to "some.route" (query-params foo="bar")}}
  Click me
{{/link-to}}
@fromURL

Optional. Mutually exclusive with @route, @model /@models, @query.

Example

<Link @fromURL="/blogs/tech/posts/dont-break-the-web" as |l|>
  <a
    href={{l.url}}
    class={{if l.isActive "is-active"}}
    {{on "click" l.transitionTo}}
  >
    Click me
  </a>
</Link>
@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 ™️ with <a> and<button>, which would otherwise trigger a native browser navigation / formsubmission.

Yielded Parameters

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.

<Link @route="some.route" as |l|>
  <a href={{l.url}} {{on "click" l.transitionTo}}>
    Click me
  </a>
</Link>
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.

<Link @route="some.route" @models={{array 123}} @query={{hash foo="bar"}} as |l|>
  <a
    href={{l.url}}
    class={{if l.isActive "is-active"}}
    {{on "click" l.transitionTo}}
  >
    One
  </a>
</Link>

<Link @route="some.route" @models={{array 123}} @query={{hash foo="quux"}} as |l|>
  <a
    href={{l.url}}
    class={{if l.isActive "is-active"}}
    {{on "click" l.transitionTo}}
  >
    Two
  </a>
</Link>
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.

<Link @route="some.route" @models={{array 123}} @query={{hash foo="bar"}} as |l|>
  <a
    href={{l.url}}
    class={{if l.isActiveWithoutQueryParams "is-active"}}
    {{on "click" l.transitionTo}}
  >
    One
  </a>
</Link>

<Link @route="some.route" @models={{array 123}} @query={{hash foo="quux"}} as |l|>
  <a
    href={{l.url}}
    class={{if l.isActiveWithoutQueryParams "is-active"}}
    {{on "click" l.transitionTo}}
  >
    Two
  </a>
</Link>

<Link @route="some.route" @models={{array 456}} @query={{hash foo="quux"}} as |l|>
  <a
    href={{l.url}}
    class={{if l.isActiveWithoutQueryParams "is-active"}}
    {{on "click" l.transitionTo}}
  >
    Three
  </a>
</Link>
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.

<Link @route="some.route" @models={{array 123}} @query={{hash foo="bar"}} as |l|>
  <a
    href={{l.url}}
    class={{if l.isActiveWithoutModels "is-active"}}
    {{on "click" l.transitionTo}}
  >
    One
  </a>
</Link>

<Link @route="some.route" @models={{array 456}} @query={{hash foo="quux"}} as |l|>
  <a
    href={{l.url}}
    class={{if l.isActiveWithoutModels "is-active"}}
    {{on "click" l.transitionTo}}
  >
    Two
  </a>
</Link>
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.

Properties

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.

Methods

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 eventargument. It will intelligently

  • call event.preventDefault() to prevent hard page reloads
  • open the page in a new tab, when Cmd / Ctrl clicking

It 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.

Testing

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']);
  });
});

Related RFCs / Projects

  • 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