0

子カスタム要素のリピーターを持つ親テンプレートがあります。

<!-- 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 の正しいコンテキストを取得するにはどうすればよいですか? バウンディングでパスする必要がありますか？

4

1 に答える 1

0

テンプレートcallで binding コマンドを使用します。users.htmlメソッドが呼び出されると、正しいコンテキスト/ 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>
于 2016-02-22T01:45:36.643 に答える