2

各ビューモデルは、そのbind()メソッドでbindingContextとの 2 つのパラメーターを取得しますoverrideContext。最初のものは現在のスコープを記述し、2 つ目は外側のスコープ (親、親の親など) を記述します。これは次のようになります。 

overrideContext: {
    bindingContext: {...}, //current level
    parentOverrideContext: {
        bindingContext: {...}, //parent's binding context
        parentOverrideContext: {...} //and so on
    }
}

これにより、ビューモデルは親のスコープからもメソッドとフィールドにアクセスできます。

bindingContextカスタム要素が作成された場合、期待されるおよびoverrideContextパラメータをで受け取りますbind()。しかし、それらを子に渡すと、期待される形式ではありませんが、次のようになります。 

overrideContext: {
    bindingContext: {...}, //current level, this is ok
    parentOverrideContext: null,
    __parentOverrideContext: {...}, //this is the real
}

parentOverrideContextオリジナルは に移動されていることに注意してください__parentOverrideContext。このように、テンプレート エンジンは親のスコープから何も解決できません。具体例を見てみましょう：

page.html: 

<template>
    Hello, user!
    <custom-element-1>
        <custom-element-2>
            <button click.trigger="myHandler()">Call myHandler</button>
        </custom-element-2>
    </custom-element-1>
</template>

page.js: 

export class MyPage {
    myHandler() {
        //do something here
    }
}

MyPageここで、親の親 ( ) で定義されたメソッドを最も内側のビューモデル ( ) のボタンから呼び出したいの<custom-element-2>ですが、フォーマットが異なるため、テンプレートは親を見つけることができず、メソッドを解決できません。

instruction.inheritBindingContextいくつかのデバッグの後、親を含めるかどうかを決定するフラグ ( ) があることに気付きました。このフラグはtrue、デフォルトではルータービュー用ですがfalse、カスタム要素用です。質問: 私はそれを正しく理解していませんか? これは望ましい動作ですか? それともバグですか？

とにかく、誰かが興味を持っているなら、フラグは簡単に変更できます:

import {customElement, processContent} from 'aurelia-templating';

@processContent((compiler, resources, node, instruction) => {
    instruction.inheritBindingContext = true;
    return true/false;
})
@customElement('custom-element-1')
export class CustomElement1 {}
4

1 に答える 1