Aurelia: element is not binding into custom-element (bindable template)

Question

Here is the custom-element:

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

and here is how I am calling it:

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

The issue is that in the custom-element the binding ${menuItem} is evaluating to the string 'menuItem'. It looks like menuItem is just null inside the template (because the for loop also has no iterations even though the menuItem being passed in has multiple navModels). It looks like somehow the menuItem is not being bound into the component.

Answer 1

Aurelia has this convention of converting camelCased variable names to kebab-case when exposing them as bindables.

Eg you define your component as:

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

And when you're using the component, you refer to the variable with the converted name.

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

---

I haven't been able to find any official documentation on this, just this issue on github: https://github.com/aurelia/binding/issues/307

---

Also note, that inside your component, the variable name works with camelCase just fine.