默认情况下，自定义元素不会继承绑定上下文。这样可以吗？

Question

每个视图模型都在其bind()方法中获得两个参数：bindingContext和overrideContext。第一个描述当前的作用域，第二个描述外部作用域:父、父、父等。如下所示：

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

这使得视图模型访问方法和字段也可以从父母的作用域访问。

如果创建了一个自定义元素，它将在bindingContext中接收预期的overrideContext和bind()参数。但是，当它将它们传递给它的子(Ren)时，它并不是预期的格式，而是：

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)中的一个按钮调用父级(MyPage)上定义的方法，但是由于格式不同，模板无法找到父模式，也无法解析该方法。

经过一些调试后，我意识到有一个标志(instruction.inheritBindingContext)，它决定是否应该包含父程序。默认情况下，标志是用于路由器视图的true，而对于自定义元素则是false .问题是:我是否没有正确理解它，，这是我想要的行为吗？或者是个bug?

无论如何，如果有人感兴趣，可以很容易地更改国旗：

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

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

Answer 1

这是故意的。它阻止开发人员构建不可移植的自定义元素，因为它们依赖外部作用域的特定属性。

https://www.danyow.net/aurelia-custom-element-vs-compose/