Question

这是自定义元素：

<template bindable="menuItem">
    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        ${menuItem}&nbsp;<span class="caret">
        </span></a>
    <ul repeat.for="navModel of menuItem.navModels" class="dropdown-menu">
        <li><a href.bind="navModel.href">${navModel.name}</a></li>
    </ul>
</template>

以下是我如何称呼它：

<template>
    <require from="./menu-bar-dd-item.html"></require>
    <require from="./menu-bar-link-item.html"></require>
    <ul class="nav navbar-nav">
        <li class="${menuItem.navModels ? 'dropdown' : navModel.isActive ? 'active' : ''}" repeat.for="menuItem of menuItems">
            <menu-bar-link-item if.one-time="!menuItem.navModels" nav-model="menuItem" ></menu-bar-link-item>
            <menu-bar-dd-item if.one-time="menuItem.navModels" menu-item="menuItem" ></menu-bar-dd-item>
        </li>
    </ul>
</template>

问题是，在自定义元素中，绑定$ {menuItem}正在评估字符串＆＃39; menuItem＆＃39;。看起来menuItem在模板中只是null（因为即使传入的menuItem有多个navModels，for循环也没有迭代）。看起来似乎某种程度上menuItem没有绑定到组件中。

Answer 1

Aurelia将这种将camelCased变量名转换为kebab-case的惯例，将它们公开为bindables。

E.g。您将组件定义为：

<template bindable="userManager">
  <p>${userManager}</p>
<template>

当您使用该组件时，您可以使用转换后的名称来引用该变量。

<whatever-name-you-chose-for-the-component user-manager.bind="someVariable">
</whatever-name-you-chose-for-the-component>

我还没有找到关于此的任何官方文档，只是这个问题在github上：https://github.com/aurelia/binding/issues/307

另请注意，在组件内部，变量名称可以与camelCase一起使用。

Aurelia：元素没有绑定到custom-element（可绑定模板）

1 个答案: