Best way to yield the active state of a LinkTo?

1

I’d like to make a {{ui-link-to}} component that basically extends Ember.LinkComponent but yields the active state, so I can use it in the block.

Is there a simple way to do this?

I see LinkComponent has an _active property which I could {{yield}} in my subclass, but that’s private.

I’ve also used the router service in the past to make my own component that effectively reimplements link-to, but I’d like to avoid that if possible.

Any ideas?

2

@samselikoff would this solution help you? Yield computed properties in link-to component by sukima · Pull Request #15835 · emberjs/ember.js · GitHub

It never went anywhere as the core team think it is addon territory and I didn’t feel like maintaining something like that. But the concept seems sound if you wanted to make your own Ember.LinkComponent like you suggested.

1 Like
3

@samselikoff Did you have any luck with this?

4

I ended up doing this, which has the same API as {{link-to}} but yields a few things:

image
image1457×690 74 KB

1 Like
5

Because this is so useful I’ve placed it into a Gist for easy copy paste:

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { computed } from '@ember/object';

export default Component.extend({

  router: service(),

  href: computed('args.[]', function() {
    return this.get('router').urlFor(...this.get('args'));
  }),

  isActive: computed('{args.[],router.currentURL}', function() {
    return this.get('router').isActive(...this.get('args'));
  }),

  actions: {
    transitionTo() {
      this.get('router').transitionTo(...this.get('args'));
    }
  }

}).reopenClass({

  positionalParams: 'args'

});

{{yield (hash
  href=href
  isActive=isActive
  transitionTo=(action "transitionTo")
)}}