diff --git a/packages/ember-glimmer/lib/components/link-to.ts b/packages/ember-glimmer/lib/components/link-to.ts index ebda3904417..7eb44740ad1 100644 --- a/packages/ember-glimmer/lib/components/link-to.ts +++ b/packages/ember-glimmer/lib/components/link-to.ts @@ -72,25 +72,9 @@ {{/link-to}} ``` - any passed value to `disabled` will disable it except `undefined`. - to ensure that only `true` disable the `link-to` component you can - override the global behavior of `LinkComponent`. + any truthy value passed to `disabled` will disable it except `undefined`. - ```javascript - import LinkComponent from '@ember/routing/link-component'; - import { computed } from '@ember/object'; - - LinkComponent.reopen({ - disabled: computed(function(key, value) { - if (value !== undefined) { - this.set('_isDisabled', value === true); - } - return value === true ? get(this, 'disabledClass') : false; - }) - }); - ``` - - see "Overriding Application-wide Defaults" for more. + See "Overriding Application-wide Defaults" for more. ### Handling `href` `{{link-to}}` will use your application's Router to @@ -277,30 +261,31 @@ check out inherited properties of `LinkComponent`. ### Overriding Application-wide Defaults - ``{{link-to}}`` creates an instance of `LinkComponent` - for rendering. To override options for your entire - application, reopen `LinkComponent` and supply the - desired values: - ``` javascript + ``{{link-to}}`` creates an instance of `LinkComponent` for rendering. To + override options for your entire application, export your customized + `LinkComponent` from `app/components/link-to.js` with the desired overrides: + + ```javascript + // app/components/link-to.js import LinkComponent from '@ember/routing/link-component'; - LinkComponent.reopen({ + export default LinkComponent.extend({ activeClass: "is-active", tagName: 'li' }) ``` - It is also possible to override the default event in - this manner: + It is also possible to override the default event in this manner: - ``` javascript + ```javascript import LinkCompoennt from '@ember/routing/link-component'; - LinkComponent.reopen({ + export default LinkComponent.extend({ eventName: 'customEventName' }); ``` + @method link-to @for Ember.Templates.helpers @param {String} routeName @@ -515,7 +500,6 @@ const LinkComponent = EmberComponent.extend({ */ init() { this._super(...arguments); - this._isDisabled = false; // Map desired event name to invoke function let eventName = get(this, 'eventName'); @@ -534,10 +518,14 @@ const LinkComponent = EmberComponent.extend({ */ disabled: computed({ get(_key: string): boolean { + // always returns false for `get` because (due to the `set` just below) + // the cached return value from the set will prevent this getter from _ever_ + // being called after a set has occured return false; }, + set(_key: string, value: any): boolean { - if (value !== undefined) { this.set('_isDisabled', value); } + this._isDisabled = value; return value ? get(this, 'disabledClass') : false; }, @@ -636,7 +624,7 @@ const LinkComponent = EmberComponent.extend({ if (get(this, 'bubbles') === false) { event.stopPropagation(); } - if (get(this, '_isDisabled')) { return false; } + if (this._isDisabled) { return false; } if (get(this, 'loading')) { // tslint:disable-next-line:max-line-length diff --git a/packages/ember/tests/helpers/link_to_test.js b/packages/ember/tests/helpers/link_to_test.js index 756f6f4078c..f33f2cc122c 100644 --- a/packages/ember/tests/helpers/link_to_test.js +++ b/packages/ember/tests/helpers/link_to_test.js @@ -133,7 +133,7 @@ moduleFor('The {{link-to}} helper - basic tests', class extends ApplicationTestC assert.equal(this.$('#about-link.do-not-want').length, 1, 'The link can apply a custom disabled class via bound param'); } - [`@test the {{link-to}} helper does not respond to clicks when disabled`](assert) { + [`@test the {{link-to}} helper does not respond to clicks when disabledWhen`](assert) { this.addTemplate('index', ` {{#link-to "about" id="about-link" disabledWhen=true}}About{{/link-to}} `); @@ -144,6 +144,17 @@ moduleFor('The {{link-to}} helper - basic tests', class extends ApplicationTestC assert.equal(this.$('h3:contains(About)').length, 0, 'Transitioning did not occur'); } + [`@test the {{link-to}} helper does not respond to clicks when disabled`](assert) { + this.addTemplate('index', ` + {{#link-to "about" id="about-link" disabled=true}}About{{/link-to}} + `); + + this.visit('/'); + this.click('#about-link'); + + assert.equal(this.$('h3:contains(About)').length, 0, 'Transitioning did not occur'); + } + [`@test the {{link-to}} helper responds to clicks according to its disabledWhen bound param`](assert) { this.addTemplate('index', ` {{#link-to "about" id="about-link" disabledWhen=disabledWhen}}About{{/link-to}}