Aurelia binding a string to a template through a custom element

Question

I am trying to create a dropdown component that is easily reusable. I would like to know if it is possible to do something like so:

<dropdown title.bind="Projects"></dropdown>

Notice I am passing a string "Projects" not a JS object. Then my dropdown template have:

<template>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">${title}</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
</template>

Of course I am not looping the dropdown-items in my demo code yet (future to do). Notice I am trying to use title like so <a>${title}</a> in the template.

Answer 1

You can use a simple bindable in dropdown 's view model but when setting the value to a plain string, don't use .bind :

<dropdown title="Projects"></dropdown>

When you are using title.bind , Aurelia binder engine will try to parse it as an expression and fail, since you (probably) don't have Projects property in your current context.