Ember navbar UI condition based on currentPath

Question

I must not be doing something right. I have the following:

application.hbs

{{#view App.NavbarView}}{{/view}}
{{outlet}}

with the following template for Navbar

_navbar.hbs

<div class="toolbar">
<div class="row">
    <div class="absolute top-left">
        <button {{action "back"}} class="btn passive back"><i class="fa fa-play"></i></button>
    </div>

    {{#if hasTabs}}
        <div class="small-centered columns">
            <div class="tabs">
                <ul>
                    {{#link-to 'stories' tagName="li" class="tab"}}<i class="fa fa-book"></i> Stories{{/link-to}}
                    {{#link-to 'mylevels' tagName="li" class="tab"}}<i class="fa fa-user"></i> My Levels{{/link-to}}
                    {{#link-to 'arcade.index' tagName="li" class="tab"}}<i class="fa fa-gamepad"></i> Arcade{{/link-to}}
                </ul>
            </div>
        </div>
    {{else}}
        <div class="small-6 small-offset-3 columns">
            <h2 class="title">{{ pageTitle App.currentPath }}</h2>
        </div>
    {{/if}}

    {{#if currentUser.userName}}
        <div class="absolute top-right">
            <span class="user-hello">Welcome Back, <strong>{{ currentUser.userName }}</strong></span>
            <button {{action "transitionAccount" currentUser._id}} class="square logged-in"><i class="fa fa-user"></i></button>
        </div>
    {{ else }}
        <div class="absolute top-right">
            <button {{action "transitionLogin"}} class="square logged-out"><i class="fa fa-user"></i></button>
        </div>
    {{/if}}
</div>
</div>

So all it is is a typical fixed navbar and in the middle of it I display what page you are on, if you happen to be on a page that has tabbed content, I show a tab container instead.

So I'm just using this.get('currentPath') in my App controller and comparing it against a group of route names to trigger true/false (I need an observer so it looks at the route change since the Navbar is in inline view at the Application level).

app.js

App.ApplicationController = Ember.ObjectController.extend({
updateCurrentPath: function() {
    App.set('currentPath', this.get('currentPath'));
}.observes('currentPath'),

tabs: function() {
    var route = this.get('currentPath'),
        group = ['arcade.index', 'mylevels', 'stories', 'arcade', 'arcade.loading'];

    console.log("ROUTE: ", route);

    var tabs = group.indexOf(route) > -1 ? true : false;
    return tabs;

}.observes('currentPath'),

    // no idea what to do here
hasTabs: function() {
    this.tabs();
}.property('tabs')
});

So, basically, no matter what, the tab UI is showing up, but I only want it to show up if that tabs observer is true. With some debugging I'm getting all the console output I would expect but I tried just doing {{#if tabs}} (just using the observer directly) and that always fires true (always shows the tabs UI). I assumed that's because it was an observer and not an actual controller property I could use in my template, so I tried just setting the hasTabs property and referencing the observer, but that doesn't seem to work. I realize I am fundamentally not understanding how this should work. Any thoughts?

Answer 1

If I understand your question correctly you should be able to just change your code to this (renamed tabs to hasTabs, removed previous hasTabs function. Changed from observes currentPath to be property of current path, removed the tabs variable assignment and replaced with the return, reduced the boolean conditional to the simple comparison operator). This is what I'd do, anyway. :) H2H

hasTabs: function() {
    var route = this.get('currentPath'),
        group = ['arcade.index', 'mylevels', 'stories', 'arcade', 'arcade.loading'];

    return group.indexOf(route) > -1;
}.property('currentPath')