Aurelia：元素未绑定到自定义元素（可绑定模板）答案

【问题标题】：Aurelia: element is not binding into custom-element (bindable template)Aurelia：元素未绑定到自定义元素（可绑定模板）
【发布时间】：2016-03-10 17:00:39
【问题描述】：

这是自定义元素：

<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 在模板内只是 null （因为即使传入的 menuItem 有多个 navModel，for 循环也没有迭代）。看起来 menuItem 没有被绑定到组件中。

【问题讨论】：

不确定我是否理解您的问题...您必须使用menu-item.bind="menuItem"
@FabioLuz 我认为这是我的问题 =)。谢谢。还是习惯了语法。
不客气，兄弟！
@FabioLuz 如果你不介意的话，我会注意的还有一个问题。任何具有视图的组件都被假定为 customElement，这是真的吗？我一直在创建组件并将它们用作自定义元素（在模板中）而不添加“@customElement”绑定。除了代码清晰度之外，还有什么理由添加“@customElement”吗？
@customElement 会覆盖组件的命名约定。例如，您有一个名为 box 的组件，其中包含 box.js 和 box.html。但是，你想叫它为 Taco，所以你添加@customElement('taco')，然后你可以叫它为<taco></taco>

标签： aurelia

【解决方案1】：

Aurelia 有这样的约定，即在将 CamelCased 变量名称公开为可绑定变量时将其转换为 kebab-case。

例如您将组件定义为：

<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。

【讨论】：