Aurelia-click.delegate错误-表示该函数不是函数 [英] Aurelia - Error with click.delegate - saying the function is not a function

问题描述

新手.

我有一个视图模型，该模型具有只需切换值的功能:

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;
        }
    }

其中有一个简单的函数，称为"toggleloggedInTest()".

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>

单击按钮时出现错误:

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?

更新更多细节

将函数转换为简单的类viewmodel和view.虽然没有错误，但没有显示loginIn的值.

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

返回并添加一个名为test的空方法，然后将其绑定到按钮.我遇到同样的问题.它无法识别视图模型中的任何功能.

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.

这是整个navmenu.ts视图模型:

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++;
        }
    }

这是整个navmenu.html:

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>

此外，它根本不与依赖项LoginInService的"loggedIn"值绑定.

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.

在这里是从-app.html

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>

推荐答案

您正在使用仅html元素，这意味着根本不使用视图模型.因此，没有描述的方法.更改为<require from=".....navmenu".像这样

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>

这篇关于Aurelia-click.delegate错误-表示该函数不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！