CODEWITHSUNDEEP
ember.js
ab AL
ab AL

Reputation: 31

Need to show/hide a button depending on the page

I am trying to hide back button on site-header that takes me to dashboard. I am using pod structure that is something like this:

In the component.js I used computed to get current route

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

export default Component.extend({
router: service (),
 dashboard:computed('currentRouteName',function(){
    if(this.get('currentRouteName') === 'main.dashboard.index'){
      return true;
    }
    return false;
})
})

In template.hbs I used the following code to check the link.

{{#unless dashboard}}
  {{#link-to "main.dashboard" class="back-btn"}}{{t "goBackToDashboard"}}{{/link-to}}
{{/unless}}

Still it is the same by tweaking the if/else conditions also I either get the button on all pages or on none. Any help will be appreciated.

app/route.js:

import EmberRouter from '@ember/routing/router';
import config from './config/environment';
import { inject } from '@ember/service';
import $ from 'jquery';
const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL,
  ajax: inject('ajax'),
});

Router.map(function () {
  this.route('login', { path: 'login' });
  this.route('main', { path: '/' }, function () {
    this.route('dashboard', { path: '' }, function () {});
    this.route("review", { path: "/review/:docId" }, function() { // eslint-disable-line
      this.route("edit", { path: "/edit/:bitId" }); // eslint-disable-line
      this.route('window_edit');
    });
}

Upvotes: 0

Views: 165

Answers (1)

locks
locks

Reputation: 6577

You mention that the computed property is in the component.js, and you are doing this.get('currentRouteName'), but that property does not exist in components.

I believe you need to use the router service in your component.

I'm assuming you are using pre-Octane syntax, so it should look something like this:

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

export default Component.extend({
   router: service(),

   dashboard: computed('router.currentRouteName',function() {
    if (this.get('router.currentRouteName') === 'main.dashboard.index') {
      return true;
    }

    return false;
  })
});

I don't remember which version RouterService was first available, but I hope this helps!

Upvotes: 0

Related Questions