diff --git a/packages/ember-glimmer/lib/components/link-to.js b/packages/ember-glimmer/lib/components/link-to.js index 780b8f03764..88f6820e307 100644 --- a/packages/ember-glimmer/lib/components/link-to.js +++ b/packages/ember-glimmer/lib/components/link-to.js @@ -543,7 +543,7 @@ const LinkComponent = EmberComponent.extend({ } }), - _computeActive(routerState) { + _isActive(routerState) { if (get(this, 'loading')) { return false; } let routing = get(this, '_routing'); @@ -557,7 +557,7 @@ const LinkComponent = EmberComponent.extend({ for (let i = 0; i < currentWhen.length; i++) { if (routing.isActiveForRoute(models, resolvedQueryParams, currentWhen[i], routerState, isCurrentWhenSpecified)) { - return get(this, 'activeClass'); + return true; } } @@ -578,11 +578,17 @@ const LinkComponent = EmberComponent.extend({ @property active @private */ - active: computed('attrs.params', '_routing.currentState', function computeLinkToComponentActive() { + active: computed('attrs.params', '_active', function computeLinkToComponentActiveClass() { let currentState = get(this, '_routing.currentState'); if (!currentState) { return false; } - return this._computeActive(currentState); + return this.get('_active') ? get(this, 'activeClass') : false; + }), + + _active: computed('_routing.currentState', function computeLinkToComponentActive() { + let currentState = get(this, '_routing.currentState'); + if (!currentState) { return false; } + return this._isActive(currentState); }), willBeActive: computed('_routing.targetState', function computeLinkToComponentWillBeActive() { @@ -590,21 +596,21 @@ const LinkComponent = EmberComponent.extend({ let targetState = get(routing, 'targetState'); if (get(routing, 'currentState') === targetState) { return; } - return !!this._computeActive(targetState); + return this._isActive(targetState); }), - transitioningIn: computed('active', 'willBeActive', function computeLinkToComponentTransitioningIn() { + transitioningIn: computed('_active', 'willBeActive', function computeLinkToComponentTransitioningIn() { let willBeActive = get(this, 'willBeActive'); if (typeof willBeActive === 'undefined') { return false; } - return !get(this, 'active') && willBeActive && 'ember-transitioning-in'; + return !get(this, '_active') && willBeActive && 'ember-transitioning-in'; }), - transitioningOut: computed('active', 'willBeActive', function computeLinkToComponentTransitioningOut() { + transitioningOut: computed('_active', 'willBeActive', function computeLinkToComponentTransitioningOut() { let willBeActive = get(this, 'willBeActive'); if (typeof willBeActive === 'undefined') { return false; } - return get(this, 'active') && !willBeActive && 'ember-transitioning-out'; + return get(this, '_active') && !willBeActive && 'ember-transitioning-out'; }), /** diff --git a/packages/ember/tests/helpers/link_to_test/link_to_transitioning_classes_test.js b/packages/ember/tests/helpers/link_to_test/link_to_transitioning_classes_test.js index b1d0c9b2e87..030118e66de 100644 --- a/packages/ember/tests/helpers/link_to_test/link_to_transitioning_classes_test.js +++ b/packages/ember/tests/helpers/link_to_test/link_to_transitioning_classes_test.js @@ -8,7 +8,7 @@ import { setTemplates, setTemplate } from 'ember-glimmer'; let Router, App, registry, container; -let aboutDefer, otherDefer; +let aboutDefer, otherDefer, newsDefer; function bootApplication() { container.lookup('router:main'); @@ -20,7 +20,11 @@ function assertHasClass(className) { while (i < arguments.length) { let $a = arguments[i]; let shouldHaveClass = arguments[i + 1]; - equal($a.hasClass(className), shouldHaveClass, $a.attr('id') + ' should ' + (shouldHaveClass ? '' : 'not ') + 'have class ' + className); + equal( + $a.hasClass(className), + shouldHaveClass, + $a.attr('id') + ' should ' + (shouldHaveClass ? '' : 'not ') + 'have class ' + className + ); i += 2; } } @@ -72,6 +76,7 @@ QUnit.module('The {{link-to}} helper: .transitioning-in .transitioning-out CSS c Router.map(function() { this.route('about'); this.route('other'); + this.route('news'); }); App.AboutRoute = Route.extend({ @@ -88,13 +93,28 @@ QUnit.module('The {{link-to}} helper: .transitioning-in .transitioning-out CSS c } }); - setTemplate('application', compile('{{outlet}}{{link-to \'Index\' \'index\' id=\'index-link\'}}{{link-to \'About\' \'about\' id=\'about-link\'}}{{link-to \'Other\' \'other\' id=\'other-link\'}}')); + App.NewsRoute = Route.extend({ + model() { + newsDefer = RSVP.defer(); + return newsDefer.promise; + } + }); + + setTemplate('application', compile(` + {{outlet}} + {{link-to 'Index' 'index' id='index-link'}} + {{link-to 'About' 'about' id='about-link'}} + {{link-to 'Other' 'other' id='other-link'}} + {{link-to 'News' 'news' activeClass=false id='news-link'}} + `)); }); }, teardown() { sharedTeardown(); aboutDefer = null; + otherDefer = null; + newsDefer = null; } }); @@ -119,6 +139,27 @@ QUnit.test('while a transition is underway', function() { assertHasClass('ember-transitioning-out', $index, false, $about, false, $other, false); }); +QUnit.test('while a transition is underway with activeClass is false', function() { + expect(18); + bootApplication(); + + let $index = jQuery('#index-link'); + let $news = jQuery('#news-link'); + let $other = jQuery('#other-link'); + + run($news, 'click'); + + assertHasClass('active', $index, true, $news, false, $other, false); + assertHasClass('ember-transitioning-in', $index, false, $news, true, $other, false); + assertHasClass('ember-transitioning-out', $index, true, $news, false, $other, false); + + run(newsDefer, 'resolve'); + + assertHasClass('active', $index, false, $news, false, $other, false); + assertHasClass('ember-transitioning-in', $index, false, $news, false, $other, false); + assertHasClass('ember-transitioning-out', $index, false, $news, false, $other, false); +}); + QUnit.test('while a transition is underway with nested link-to\'s', function() { expect(54);