title: What is the correct way in aurelia to bind on a custom element using repeat.for
body: <p>Using Aurelia I am struggling with binding and repeat.for :
  suppose I have in my viewmodel with a property menuItems (an array of <code>MenuItem</code>) I would like to repeat the menuitems with a custom template  :</p>
  
  <pre class="lang-js prettyprint-override"><code>export class App {
      menuItems : MenuItem[];
  }
  export class MenuItem{
     label:string;
  }
  </code></pre>
  
  <p>In my app template I use use a custom element </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;require from="./menu-item"&gt;&lt;/require&gt;
  &lt;ul&gt;
    &lt;menu-item repeat.for="item of menuItems"&gt;&lt;/menu-item&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My custom template (menu-item.html):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;li&gt;${label}&lt;/li&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>What is the correct way the get the template bound or access the bound MenuItem?</p>
  
  <p>I've tried the following: <code>${label}</code> and <code>${item.label}</code> but that does not work. I can see in the <code>bind(bindingContext)</code> callback that bindingContext has a property 'item' : <code>bindingContext.item</code> which is the MenuItem that is being bound.</p>
  
  <p>I also tried to create bindable attribute on the MenuItem class:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class MenuItem{
     @bindable current any;
     label:string;
  }
  </code></pre>
  
  <p>and the following repeater:</p>
  
  <pre><code>&lt;menu-item repeat.for="item of menuItems" current.bind="item"&gt;&lt;/menu-item&gt;
  </code></pre>
  
  <p>and a corresponding template</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;li&gt;${current.label}&lt;/li&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><em>note: see edit 1 below, for my comment on this point in the code.</em></p>
  
  <p>This approach also does not work.</p>
  
  <p>Other explorations included not using a custom element (worked), using <code>&lt;compose view-model='MenuItem', model.bind='item'/&gt;</code>, does not work in this example either and would be to elaborate, I think.</p>
  
  <p>Working solution, see also <a href="https://gist.run/?id=0efbaea028450163d98e" rel="noreferrer">Aurelia repeat.for binding on a custom element </a>
  :</p>
  
  <p>repeat and bind on a custom attribute of the template and viewmodel class:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;menu-item repeat.for="item of menuItems" current.bind="item" containerless&gt;&lt;/menu-item&gt;
  </code></pre>
  
  <p>The viewmodel class:</p>
  
  <pre class="lang-js prettyprint-override"><code>import {bindable, customElement} from 'aurelia-framework'
  
  @customElement('menu-item')
  export class MenuItem{
    label = "default label";
    @bindable current;
  
    constructor(label){
      this.label = label;
    }
    attached(){
      console.log("MenuItem = attached");
    }
  }
  </code></pre>
  
  <h1>Edit 1:</h1>
  
  <p>I see in the output the html of templates repeated for as many there are MenuItems. But these items are not bound: the <code>&lt;li&gt;</code> is empty. I expected to see the labels.</p>
  
  <h1>Edit 2:</h1>
  
  <p>in this post I typed "items in menuItems", that's not correct it should be "item of menuItems". But that was not the cause of my struggling, I had it mis-typed in this post only</p>
  
  <h1>Edit 3:</h1>
  
  <p>@jeremy-danyow suggested that</p>
  
  <ul>
  <li>html should be well formed:  menu-item within ul is not correct (using <code>containerless</code> attribute helps by removing the menu-item element)</li>
  <li>custom elements should always have a closing tag 
  I have adapted the code.
  Also I made a plunker: <a href="https://gist.run/?id=0efbaea028450163d98e" rel="noreferrer">Aurelia repeat.for binding on a custom element </a></li>
  </ul>
  
  <p>That plunker works, provided a <code>@bindable</code> attribute;</p>