Question

新手。

我有一个viewmodel，它具有一个只需切换值的函数：

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

其中有一个名为＆＃34; toggleloggedInTest（）＆＃34;的简单函数。

在我看来，我有以下内容：

    <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)

不知道为什么这不起作用？有人可以提出错误的建议并找到解决方法吗？

使用附加详细信息进行更新

将传递的函数转换为简单的类视图模型和视图。虽然它没有错误但它没有显示loggedIn的值。

返回并添加一个名为test的空方法，然后将其绑定到一个按钮。我遇到了同样的问题。它无法识别viewmodel中的任何函数。

这是整个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：

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

此外，它不依赖于依赖项loggedInService＆＃34; loggedIn＆＃34;价值。

进一步观察我发现如果在普通页面中调用函数它可以工作，但是如果从navmenu中调用它，它就无法识别函数。

以下是从app.html调用navmenu的地方

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

Answer 1

您正在使用仅限html元素，这意味着您根本不使用视图模型。所以没有方法描述。更改为<require from=".....navmenu"。喜欢这个

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

Aurelia - click.delegate出错 - 说该函数不是函数

1 个答案: