Aurelia导航栏虚拟机不工作
发布时间:2020-12-15 04:31:14 所属栏目:Java 来源:网络整理
导读:我按照Aurelia教程中的示例设置了nav-bar.html和nav-bar.js.后来,我想在nav-bar.js VM中添加一些功能,但发现它的属性或方法都没有调用过. 我正在尝试在我的顶部导航中使用Aurelia Auth过滤,但即使省略了auth功能,也无法调用top-nav-bar.js中的任何内容. 代码
我按照Aurelia教程中的示例设置了nav-bar.html和nav-bar.js.后来,我想在nav-bar.js VM中添加一些功能,但发现它的属性或方法都没有调用过.
我正在尝试在我的顶部导航中使用Aurelia Auth过滤,但即使省略了auth功能,也无法调用top-nav-bar.js中的任何内容. 代码如下: 顶级NAV-bar.js import {bindable} from 'aurelia-framework'; import {inject} from 'aurelia-framework'; import {AuthService} from 'aurelia-auth'; //import {AuthFilterValueConverter} from './authFilter'; //import {Router} from 'aurelia-router'; @inject(AuthService ) export class TopNavBar { _isAuthenticated=false; @bindable router = null; constructor(auth){ console.log('called nav bar constructor'); //NEVER CALLED this.auth = auth; } //@computedFrom(this.auth) get isAuthenticated(){ return this.auth.isAuthenticated(); //NEVER CALLED } } 顶级NAV-一个bar.html <template> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!-- <require from="paulvanbladel/aurelia-auth"></require> --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#"> <i class="fa fa-home"></i> <span>${router.title}</span> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li repeat.for="row of router.navigation | authFilter: isAuthenticated" class="${row.isActive ? 'active' : ''}"> <a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1.in" href.bind="row.href">${row.title}</a> </li> </ul> <ul if.bind="!isAuthenticated" class="nav navbar-nav navbar-right"> <li><a href="/#/login">Login</a></li> </ul> <ul if.bind="isAuthenticated" class="nav navbar-nav navbar-right"> <li><a href="/#/profile">Profile</a></li> <li><a href="/#/logout">Logout</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="loader" if.bind="router.isNavigating"> <i class="fa fa-spinner fa-spin fa-2x"></i> </li> </ul> </div> </nav> </template> app.html <template> <require from="./top-nav-bar.html"></require> <require from="bootstrap/css/bootstrap.css"></require> <top-nav-bar router.bind="router"></top-nav-bar> <div class="page-host"> <router-view></router-view> </div> </template> 解决方法
如果你有一个带有js和html的aurelia VM,你需要将它导入到视图中(不含* .html):
<require from="./top-nav-bar"></require> 有时您没有视图的VM,在这种情况下,您只导入html,就像您一样: <require from="./top-nav-bar.html"></require> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |