Skip to content

External Links #290

Description

@buschtoens

This makes no sense when used directly in the template, like:

<Link @external="https://example.com" as |l|>
  <a href={{l.url}} {{on "click" l.transitionTo}}>
    Example
  </a>
</Link>

However, it becomes very useful when passing Links around, e.g. to build a navigation menu, because you can then easily use the same primitive in a common code path:

<NavigationMenu
  @navItems={{array
    (hash label="Top Sellers" link=(link "top"))
    (hash label="Categories" link=(link "categories"))
    (hash label="Shopping Cart" link=(link "cart"))
    (hash label="Legal" link=(external-link "/legal"))
  }}
/>
{{#each @navItems as |item|}}
  <a href={{item.link.url}} {{on "click" l.transitionTo}}>
    {{item.label}}
  </a>
{{/each}}

I'm not sure about the exact API yet.

Another thing: Usually you'll want external links to open in a new tab. This should not need to be defined at the "call site" where the Link is used on an <a> element, but rather where the Link is defined.

Something like this maybe? #289

<NavigationMenu
  @navItems={{array
    (hash label="Top Sellers" link=(link "top"))
    (hash label="Categories" link=(link "categories"))
    (hash label="Shopping Cart" link=(link "cart"))
    (hash label="Legal" link=(external-link "/legal" newTab=true))
  }}
/>

Activity

  1. mehulkar commented on Feb 27, 2020

    @mehulkar

    Usually you'll want external links to open in a new tab.

    Don't make this assumption, please :)

  2. buschtoens commented on Feb 27, 2020

    @buschtoens
    OwnerAuthor

    Sure! I definitely wasn't implying that this should be the default behavior. I only meant that it should be possible to pass something like newTab=true.

  3. gossi commented on May 19, 2020

    @gossi
    Collaborator

    We can do something like an {{external-link}} modifier which allows you to intercept external link handling with your own logic:

    External Link: Any link/url not recognizable by the ember router.

    Instance-specific:

    <div {{external-link this.handleExternalLink}}>
      <a href="https://emberjs.com">Go to ember</a>
    </div>

    And handleExternalLink() will receive the click event.

    Or register this globally:

    // app/application/route.ts
    export default class ApplicationRoute extends Route {
    
      beforeModel() {
        this.externalLinkService.setHandler(this.handleExternalLinkGlobal);
      }
    
      @action
      handleExternalLinkGlobal() {
        // so sth here
      }
    }

    And use it like this:

    <div {{external-link}}>
      <a href="https://emberjs.com">Go to ember</a>
    </div>

    If there is no handler given as first argument to the modifier or no global handler... then the {{external-link}} modifier does nothing.

    eeeek. would work nicely with the (external-link) helper:

    <NavigationMenu {{external-link this.openInNewTab}}
      @navItems={{array
        (hash label="Top Sellers" link=(link "top"))
        (hash label="Categories" link=(link "categories"))
        (hash label="Shopping Cart" link=(link "cart"))
        (hash label="Legal" link=(external-link "/legal"))
      }}
    />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions