Aurelia - Error with click.delegate - saying the f

问题:

Novice.

I have a viewmodel that has a function that simply toggles a value:

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

    @autoinject
    export class Navmenu {

        constructor(public loggedInService: LoggedInService) {
            this.loggedInService = loggedInService;              
        }

        toggleloggedInTest() { // just for testing
            this.loggedInService.isLoggedIn = !this.loggedInService.isLoggedIn;
        }
    }

In it there is one simple function called "toggleloggedInTest()".

In my view I have the following:

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

When I click the button I get the error:

aurelia-binding.js:1919 Uncaught Error: toggleloggedInTest is not a function
at getFunction (aurelia-binding.js:1919)
at CallScope.evaluate (aurelia-binding.js:1522)
at Listener.callSource (aurelia-binding.js:5113)
at Listener.handleEvent (aurelia-binding.js:5122)
at HTMLDocument.handleDelegatedEvent (aurelia-binding.js:3237)

No idea why this is not working? Can someone suggest what is wrong and a way to fix it?

UPDATE WITH EXTRA DETAILS

Transferred function to a simple class viewmodel and view. Whilst it didnt error it didnt show the value of loggedIn.

Went back and added an empty method called test and then bound that to a button. I get the same problem. It not recognising any functions in the viewmodel.

Here is the whole navmenu.ts viewmodel:

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

    @autoinject
    export class Navmenu {
        //loggedInService: LoggedInService;
        public currentCount = 0;

        constructor(public loggedInService: LoggedInService) {
            this.loggedInService = loggedInService;

            console.log("loggedin NAVMENU: ", this.loggedInService.isLoggedIn)

        }

        public toggleloggedInTest() {
            this.loggedInService.isLoggedIn = !this.loggedInService.isLoggedIn;
        }

        public incrementCounter() {
            this.currentCount++;
        }
    }

and here is the whole navmenu.html:

    <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>
            show: ${loggedInService.isLoggedIn}
            <div if.bind="loggedInService.isLoggedIn">
                working
            </div>

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

            <h1>Counter</h1>

            <p>This is a simple example of an Aurelia component.</p>

            <p>Current count: <strong>${currentCount}</strong></p>

            <button click.delegate="incrementCounter()">Increment</button>

        </div>
    </template>

Further, its not binding with the dependencies loggedInService "loggedIn" value at all.

Looking even further I find that if a function is called in a normal page it works but if its called from within the navmenu it cant recognise a function.

Here is where navmenu is called from - app.html

    <template>
        <require from="../navmenu/navmenu.html"></require>
        <require from="./app.css"></require>
        <!--We want the nav bar to span the page-->
        <div class="container-fluid">
            <navmenu router.bind="router"></navmenu>
        </div>
        <!--We want the media to centre so we use just container-->
        <div class="container">
            <div className='col-sm-12'>
                <div className='row'>
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </template>

回答1:

You are using html only element, which means your view model is not used at all. So theres no method described. Change to <require from=".....navmenu". Like this

<require from="../navmenu/navmenu"></require>