Skip to content
🔗 A lightweight alternative to {{link-to}}
Branch: master
Clone or download
Latest commit 47ef60b Nov 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon Generate the URL by calling the same method that the link-to componen… Nov 30, 2018
app Fix memory leak caused by the click event listener Oct 19, 2017
config
tests Generate the URLs using the same approach as Ember's link-to component Nov 29, 2018
vendor Initial Commit from Ember CLI v1.13.1 Jul 14, 2015
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.npmignore
.nvmrc Update nvmrc to current version of node being used Oct 21, 2017
.travis.yml
.watchmanconfig Update to latest ember, ember-cli and ember-data Jun 21, 2016
LICENSE.md
README.md update link to link-to docs Oct 22, 2017
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

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 Ember Observer Score

Why use it?

Every time you use a {{link-to}}, you create a view. 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 than {{link-to}} in Ember 1.13.4.

Questions? Ping me @gavinjoyce

Installation

This is an Ember CLI addon, to install:

ember install ember-href-to

Usage Instructions

{{href-to}} has the same interface as {{link-to}}, you can use it to link to static and dynamic routes in your ember application:

<a href="{{href-to 'index'}}">Go Home</a>
<a href="{{href-to 'contacts.contact' contact}}">View Contact 1</a>
<a href="{{href-to 'contacts.contact' 2}}">View Contact 2</a>
<a href="{{href-to 'contact-us' (query-params section='first')}}">You can also use query params</a>
<a href="{{href-to 'contact-us'}}#first">You can also use fragment identifiers</a>
<a href="{{href-to 'contact-us'}}" data-href-to-ignore>
  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
</a>

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

Development Instructions

  • git clone this repository
  • npm install
  • bower install

Running

You can’t perform that action at this time.