Need to show/hide a button depending on the page

Questions
1

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:

  • pod
    • component
      • site-header
        • template.hbs
        • component.js
    • main
      • dashboard

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

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

2

Hi @Abdullah_Ali, welcome! When I get into a situation like this I usually start by putting a breakpoint in the computed property to make sure it’s checking/returning the right thing. You can also use the {{log <property>}} template helper in a template context if that’s where things seem to be going wrong. In this case I think the computed property or its dependent key may be your culprit.

I noticed the code you posted uses currentRouteName as the dependent property for your computed, what is currentRouteName in your component? Does it inject the router service somewhere?

3

Thanks for the help @dknutsen. I recently started working on emberjs so don’t seem to know many things about it. And yes I did inject router service but still can’t seem to get to my solution.

4

So without seeing more component code I can only guess but I’m betting the problem is that you’re observing the currentRouteName on the component itself instead of on the router service.

This code:

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

Will observe this.currentRouteName for changes and update if this.currentRouteName changes. However my guess is that you actually want to be observing this attribute on the router service. If you injected the router as router (the default), you could rewrite your code like this:

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

Since the router is injected at this.router and you want to view the prop currentRouteName on the router service, the full path is this.router.currentRouteName. If that still doesn’t work there may be some other issue. Try putting a breakpoint or a debugger statement in your computed property and looking at the values on the component.

EDIT: you could also rewrite the computed property like this for simplicity:

  return this.get(‘router.currentRouteName’) === ‘main.dashboard.index’;
5

Hi @dknutsen. Thanks for your help. I put a debugger statement as you suggested and got ‘main.loading’ as my currentRouteName which is on my every page and doesnt solve the problem if I replace it with ‘main.dashboard.index’. Will apreciate any feedback from you

6

The breakpoint will be hit anytime the route changes, which will happen a couple times for loading a page including loading state. What happens if you continue and it hits the breakpoint again? It should eventually hit a breakpoint where ‘main.dashboard.index’ is the current route (assuming you’re on that route).