从显示在转发器循环中的子自定义元素获取正确的上下文。奥雷利亚

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 是位于父 VM 中的回调，我需要从我的子自定义元素中调用它。

这是我的子自定义组件

/*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>

我的第一个问题：可以吗？或者有一些更巧妙的方法来从子组件调用回调？

然后我尝试在子 VM 中获取父 VM 上下文：

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

并尝试将回调调用绑定到此上下文：

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

但 $parentCtx 在这种情况下不正确，因为父模板中有 repeat.for。 $parentCtx 等于我的 GithubUser。如何在父 VM 中获取 editUser 的正确上下文？我应该用边界路径吗？

Answer 1

在users.html模板中使用call绑定命令。调用该方法时，它将保留正确的 context/this。这就是它的样子：

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>

从显示在转发器循环中的子自定义元素获取正确的上下文。奥雷利亚

Get correct context from child custom element which displays in repeater loop. Aurelia

javascript

repeater

parent

aurelia

custom-element