导航栏中的Aurelia绑定单击触发器 [英] Aurelia Binding Click Trigger in Nav Bar
问题描述
为app.html提供以下布局:
Given the following layout for app.html:
<template>
<require from="nav-bar.html"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div id="sidebar"><h3>This is the sidebar.</h3></div>
<div id="page-host" class="page-host">
<router-view></router-view>
</div>
</template>
如何绑定到nav-bar.html中的toggleSidebar函数(从app.js导出)?
How do I bind to the toggleSidebar function (which is exported from app.js) in nav-bar.html?
<template bindable="router">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
....
<a class="navbar-brand" href="#" click.trigger="toggleSidebar()">
<i class="fa fa-bars"></i>
<span>${router.title}</span>
</a>
</div>
....
</nav>
</template>
当我单击toggleSidebar链接时,当前出现以下错误:
Currently I get the following error when I click on the toggleSidebar link:
"toggleSidebar不是函数".
"toggleSidebar is not a function".
推荐答案
在nav-bar.html中,为toggle方法添加另一个可绑定的属性.可绑定属性是与自定义元素共享数据/功能的方式.这样可以使自定义元素保持封装和可移植性.
In nav-bar.html, add another bindable property for the toggle method. Bindable properties are the way to share data/functions with a custom element. This keeps custom elements encapsulated and portable.
<template bindable="router,toggleSidebar">
然后在app.html中,将toggleSidebar
方法绑定到导航栏元素:
Then in app.html, bind the toggleSidebar
method to the nav-bar element:
<nav-bar router.bind="router" toggle-sidebar.call="toggleSidebar()"></nav-bar>
我认为您可能需要从toggleSidebar方法返回true
,以免取消默认操作(跟随链接).
I think you may need to return true
from your toggleSidebar method so that the default action (following the link) isn't canceled.
这篇关于导航栏中的Aurelia绑定单击触发器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!