title: Aurelia: Accessing parent VM method from within child VM
body: <p>A common use case working with lists is accessing a method of the list from within a list-item. For example: a project-item has an option to delete itself from the containing list. I would like to know if the pattern I describe below for Aurelia is valid or maybe there are better solutions.</p>
  
  <p>In Aurelia I have the following setup:</p>
  
  <p>The containing list: (project-list.html and projectList.js)</p>
  
  <pre><code>&lt;template&gt;      
    &lt;div class="projects"&gt;
      &lt;input value.bind="newProjectName" placeholder="New project name"/&gt;
      &lt;project-item repeat.for="project of projects" project.bind="project"&gt;&lt;/project-item&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>and the child item: (project-item and projectItem.js)</p>
  
  <pre><code>&lt;template&gt;
    &lt;span class="title"&gt;
      ${project.name} &lt;i click.delegate="deleteProject(project)" class="icon-trash"&gt;&lt;/i&gt;
    &lt;/span&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>In this case <code>deleteProject(project)</code> is a member of projectList VM:</p>
  
  <pre><code>function deleteProject(project){
      var index = this.projects.indexOf(project);
      if (index&gt;-1){
          this.projects.splice(index,1)
      }
  }
  </code></pre>
  
  <p>Unfortunately, as I understand from this issue <a href="https://github.com/aurelia/framework/issues/311" rel="noreferrer" title="VM Model Binding Changed in Beta 1.1.x #311">https://github.com/aurelia/framework/issues/311</a>,
  that wil not work (anymore).</p>
  
  <p>As a work-around I can bind a function on the project-item VM:</p>
  
  <pre><code>@bindable delete: Function;
  </code></pre>
  
  <p>and in the project-list template:</p>
  
  <pre><code>&lt;project-item repeat.for="project of projects" project.bind="project" delete.bind="deleteProject"&gt;&lt;/project-item&gt;
  </code></pre>
  
  <p>That does work, provide the bound function is a assigned property with a closure:</p>
  
  <pre><code>deleteProject = function(project : Projects.Project){
          var index = this.projects.indexOf(project);
          if (index&gt;-1){
              _.remove(this.projects,(v,i)=&gt;i==index);
          }
      }
  </code></pre>
  
  <p>The closure is needed to acces the correct context (<code>this</code> being the project-list). Using</p>
  
  <pre><code>function deleteProject(project)
  </code></pre>
  
  <p><code>this</code> would refer to the context of the project-item.</p>
  
  <p>Even though this construction works and has not much overhead in plumbing, it feels to me a bit fragile:</p>
  
  <ul>
  <li>The assigned function is hard to distinguish form a regular class function</li>
  <li>binding the function as well as the list-item seems a bit "overdone"</li>
  </ul>
  
  <p>Or maybe I'm missing an Aurelia bubbling mechanism that makes accessing a parent VM handled by the framework? </p>
  
  <p>Edit after answer:
  Based on the answer by @Sylvain I made a GistRun that implements a skeleton list and list-item implementation with add and remove:</p>
  
  <p><a href="https://gist.run/?id=498a350f21e7f57459e49fc8a444be52" rel="noreferrer">Aurelia Skeleton list list-item implementation</a></p>