Question

给出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导出）？

<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链接时出现以下错误：

“toggleSidebar不是函数”。

Answer 1

在nav-bar.html中，为toggle方法添加另一个可绑定属性。可绑定属性是与自定义元素共享数据/函数的方法。这样可以保持自定义元素的封装和可移植性。

<template bindable="router,toggleSidebar">

然后在app.html中，将toggleSidebar方法绑定到nav-bar元素：

<nav-bar router.bind="router" toggle-sidebar.call="toggleSidebar()"></nav-bar>

我认为您可能需要从toggleSidebar方法返回true，以便不会取消默认操作（链接后）。

Aurelia绑定点击导航栏中的触发器

1 个答案: