Ember 2.7: Remove button if I am on a nested route

My goal is to have the posts.index show a list of your posts and a button to add a new post above your list of current posts. I have a button ("Add new post") that I want to disappear once that button renders the posts.new template in the

My Router

Router.map(function() {
  ...
  this.route('posts', function() {
    this.route('new');
  });
});

Posts.index template

 

  <p>works</p>

  <p>doesn't</p>

Add a new post

controller

export default Ember.Controller.extend({
  posts: Ember.inject.controller(),
  showButton: Ember.computed.equal('posts.index', 'posts.new'),
});

Right now showButton is returning 'doesn't' on both routes because I am not using the computed.equal helper correctly. What I am trying to do is check if the current route is matching up to the posts.new route and if it is, display the block of code I desire.