External Links

[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))
  }}
/>

[mehulkar]

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

Don't make this assumption, please :)

[buschtoens]

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.

[gossi]

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"))
  }}
/>