https://github.com/intercom/ember-href-to

:link: A lightweight alternative to {{link-to}}
https://github.com/intercom/ember-href-to

Last synced: 3 months ago
JSON representation

:link: A lightweight alternative to {{link-to}}

• Host: GitHub
• URL: https://github.com/intercom/ember-href-to
• Owner: intercom
• License: apache-2.0
• Created: 2015-07-13T19:09:57.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-07-23T10:22:58.000Z (4 months ago)
• Last Synced: 2024-07-23T10:23:47.255Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 842 KB
• Stars: 191
• Watchers: 171
• Forks: 42
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-ember - ember-href-to - A lightweight alternative to {{link-to}}. (Packages / Query Params)

README

        
# ember-href-to

A lightweight alternative to `{{link-to}}`. No components, no class bindings - just a bound anchor href and a click handler.

[![Build Status](https://github.com/intercom/ember-href-to/workflows/CI/badge.svg)](https://github.com/intercom/ember-href-to/actions) [![Ember Observer Score](http://emberobserver.com/badges/ember-href-to.svg)](http://emberobserver.com/addons/ember-href-to)

## Why use it?

Every time you use a `{{link-to}}`, you create a component. This is usually fine, but in cases where you're creating many of these, performance can suffer. `{{href-to}}` simply creates a URL and is [12x faster](https://github.com/GavinJoyce/ember-performance/pull/1) than `{{link-to}}` in Ember 1.13.4.

Questions? Ping me [@gavinjoyce](https://twitter.com/gavinjoyce)

## Installation

This is an Ember CLI addon, to install:

`ember install ember-href-to`

## Supported Ember Versions

- v5.0.1. supports Ember versions >=3.1 & <3.27

- It does not work in apps using Ember's modernized `LinkTo`, which was introduced in Ember 3.27 and built using Glimmer components. See [this comment](https://github.com/intercom/ember-href-to/pull/152#issuecomment-1882813145) for more info.

## Usage Instructions

`{{href-to}}` has the same interface as [`{{link-to}}`](https://guides.emberjs.com/v2.16.0/templates/links/), you can use it to link to static and dynamic routes in your ember application:

```html

Go Home

View Contact 1

View Contact 2

You can also use query params

You can also use fragment identifiers



  If you have a catchall route (this.route('catchall', { path: "/*" })), you

  need to add the attribute "data-href-to-ignore", otherwise you will always

  match it



```

As `{{href-to}}` simply generates a URL, you won't get automatic `active` class bindings as you do with `{{link-to}}`. Clicking on a `{{href-to}}` URL will trigger a full router transition though:

![href-to2](https://cloud.githubusercontent.com/assets/2526/8709271/0a8b934a-2b39-11e5-8f24-89ece7d6c45d.gif)

## Development Instructions

- `git clone` this repository

- `npm install`

- `bower install`

### Running

- `ember server`

- Visit your app at http://localhost:4200.