Aurelia - How to access a variable from my navmenu

问题:

Novice,

I am trying to access a Boolean variable in my view-model. My view-model accesses a class with a function that returns a boolean value. In this case whether its logged in.

What I want to do is use the if.bind to either show or hide a menu element.

My navmenu is as follows:

            <template bindable="router">
            <require from="./navmenu.css"></require>
            <div class="main-nav">
                <div class="navbar navbar-inverse">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#/home">Jobsledger.API</a>
                    </div>
                    <div class="navbar-collapse collapse">

                        <ul class="nav navbar-nav">

                            <li repeat.for="row of router.navigation" class="${ row.isActive ? 'link-active' : '' }">
                                <a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>

                                <a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
                                   if.bind="row.settings.nav">
                                    ${row.title}
                                    <span class="caret"></span>
                                </a>

                                <ul if.bind="row.settings.nav" class="dropdown-menu">
                                    <li repeat.for="menu of row.settings.nav">
                                        <a href.bind="menu.href">${menu.title}</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                    test ${loggedIn}
            </div>
        </template>

This already checks the router row for nav. I want to also check my boolean variable however I dont know how to simply access this variable. It seems I have to have the value inside a function and not have it just available.

I tried using @bindable (as below) and also placed the variable, equal to the value of the function in the constructor but I cant even get it to show in a simple test - "test ${loggedIn}" (see the bottom of the navmenu).

Here is my navmenu view-model:

        import { autoinject, inject, NewInstance } from "aurelia-framework";
        import { LoggedInService } from "../components/auth/LoggedInService";
        import { bindable } from "aurelia-templating";

        @autoinject
        @bindable
        export class Navmenu {
            private testAuthentication: LoggedInService;
            @bindable public loggedIn: boolean = this.testAuthentication.isAuthenticated();

            constructor(testAuthentication: LoggedInService) {
                this.testAuthentication = testAuthentication;
                this.loggedIn = this.testAuthentication.isAuthenticated();

            }

        }

How can I access this "loggedIn" variable and so test for whether loggedIn = true etc?

回答1:

with the assumption that your LoggedInService looks something like

export class LoggedInService {
    ....
    public loggedIn: boolean
    // you can set loggedIn to true or false on login, logout, token_expire, storage_change etc     
    ...
}

you can access loggedIn value available in LoggedInService from components as below

import { autoinject } from "aurelia-framework"
import { LoggedInService } from "../components/auth/LoggedInService"

@autoinject
export class NavMenu {
    auth: LoggedInService

    constructor(auth: LoggedInService) {
        this.auth = auth;
    }

    toggleloggedInTest() { // just for testing
      this.auth.loggedIn = !this.auth.loggedIn
   }
}

and to test, in your view

<div>
   <button click.delegate="toggleloggedInTest()" type="button">Test</button>
    testing loggedIn: ${auth.loggedIn}
</div>