Aurelia:元素未绑定到自定义元素（可绑定模板）

以下是自定义元素：

<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}的计算结果是字符串“menuItem”。看起来menuItem在模板中只是空的（因为for循环也没有迭代，即使传入的menuItem有多个navModels）。看起来菜单项似乎没有被绑定到组件中。

Aurelia有这样一个惯例，即在将camelCased变量名作为可绑定项公开时，将其转换为kebab大小写

例如，您将组件定义为：

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

${userManager}

当您使用组件时，使用转换后的名称引用变量

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

---

我还没有找到任何关于这个问题的官方文档，只是在github上找到了这个问题：

---

---

还要注意的是，在组件内部，变量名与camelCase配合得很好。

不确定我是否理解您的问题。。。你必须使用

菜单项。bind=“menuItem”

@fabioloz我想这是我的问题=）。谢谢还在习惯语法。不客气，兄弟@法比奥鲁兹还有一个问题，请注意，如果你不介意的话。是否假定任何具有视图的组件都是customElement？我一直在创建组件并将它们用作自定义元素（在模板中），而没有添加'@customElement'绑定。除了代码清晰外，是否有任何理由添加“@customElement”？@customElement会覆盖组件的命名约定。例如，您有一个名为box的组件，其中包含box.js和box.html。但是，您希望将其称为Taco，因此添加@customElement（'Taco'），然后可以将其称为