https://github.com/intercom/ember-href-to
:link: A lightweight alternative to {{link-to}}
https://github.com/intercom/ember-href-to
Last synced: 22 days 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 (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2025-03-13T11:00:59.000Z (about 2 months ago)
- Last Synced: 2025-04-14T01:06:23.301Z (22 days ago)
- Language: JavaScript
- Homepage:
- Size: 1.52 MB
- Stars: 190
- Watchers: 177
- Forks: 43
- Open Issues: 28
-
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.
[](https://github.com/intercom/ember-href-to/actions) [](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:
## Development Instructions
- `git clone` this repository
- `npm install`
- `bower install`
### Running
- `ember server`
- Visit your app at http://localhost:4200.