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.

Not sure if I understood your problem... You have to use menu-item.bind="menuItem" — Fabio Luz
@FabioLuz I think that is my problem =). Thanks. Still getting used to the syntax. — pQuestions123
@FabioLuz One more question while I have your attention if you don't mind. Is it true that any component that has a view is assumed to be a customElement? I have been creating components and using them as custom elements (in templates) without adding '@customElement' binding. Is there any reason to add the '@customElement' other than code clarity? — pQuestions123
@customElement overrides the component's naming convention. For example, you have a component called box, which would have a box.js and box.html. However, you want to call it as Taco, so you add @customElement('taco'), then you can call it as <taco></taco> — Fabio Luz

Vaz Vaz · Accepted Answer · 2016-03-30T08:43:19

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

E.g. 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.

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

1 Answers