Получить правильный контекст из дочернего пользовательского элемента, который отображается в цикле повторителя. Aurelia

Question

У меня есть родительский шаблон, у которого есть ретранслятор для дочерних пользовательских элементов.

<!-- users.html --> 
<div class="col-sm-6 col-md-3" repeat.for="user of users"> 
    <git-hub-user-card user.bind="user" edit-user.bind="editUser"></git-hub-user-card> 
</div> 

editUser является обратным вызов находится в родительской виртуальной машине, и мне нужно, чтобы вызвать его из моего ребенка пользовательского элемента.

Вот мой ребенок пользовательский компонент

/*user.js*/ 
import {customElement, bindable} from 'aurelia-framework'; 

    @customElement('git-hub-user-card') 
    export class GithubUser { 

     @bindable editUser; 
     @bindable user = {}; 

     bind(parentCtx) { 
      this.$parentCtx = parentCtx; 
     } 
    } 

и здесь дочерний шаблон

<!-- user.html --> 
<div class="content"> 
    <p class="name" >${user.login}</p> 
    <a href="#" class="btn btn-default" click.delegate="editUser.call($parentCtx, $event, user)">Edit Name</a> 
</div> 

Итак, я переданную функцию обратного вызова в детском компоненте путем связывания.

<git-hub-user-card user.bind="user" edit-user.bind="editUser"></git-hub-user-card> 

Мой первый вопрос: это нормально? Или есть еще более аккуратный подход для вызова callback от дочернего компонента?

Затем я попытался получить родительскую VM контекст ребенка VM:

bind(parentCtx) { 
    this.$parentCtx = parentCtx; 
} 

и попытались связанного обратного вызова в этом контексте:

<a click.delegate="editUser.call($parentCtx, $event, user)">Edit Name</a> 

но $parentCtx не является правильным в этом из-за repeat.for в родительском шаблоне. $parentCtx равен моему GithubUser. Как я могу получить правильный контекст для editUser в родительской виртуальной машине? Должен ли я использовать его с ограничением?

Answer 1

Используйте команду привязки call в шаблоне users.html. Он сохранит правильный контекст/это при вызове метода. Вот что это будет выглядеть следующим образом:

user.js

import {customElement, bindable} from 'aurelia-framework'; 

@customElement('git-hub-user-card') 
export class GithubUser { 
    @bindable editUser; 
    @bindable user; 
} 

user.html

<div class="content"> 
    <p class="name" >${user.login}</p> 
    <a href="#" class="btn btn-default" click.delegate="editUser()">Edit Name</a> 
</div> 

users.html

<div class="col-sm-6 col-md-3" repeat.for="user of users"> 
    <git-hub-user-card user.bind="user" edit-user.call="editUser(user)"></git-hub-user-card> 
</div>