javascript - Aurelia - 自定义元素默认不继承绑定(bind)上下文。可以吗？

Question

每个 View 模型在其 bind() 中获得两个参数方法:bindingContext和 overrideContext .第一个描述当前范围，第二个描述外部范围:父级、父级的父级等。这看起来像这样:

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

这使得 View 模型也可以从父级范围访问方法和字段。

如果创建自定义元素，它会收到预期的 bindingContext和 overrideContext bind() 中的参数.但是当它把它们传递给它的 child 时，它不是预期的格式，而是:

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
    }
}

这里我想从最里面的 View 模型(MyPage)中的按钮调用在父项的父项(<custom-element-2>)上定义的方法，但由于格式不同，模板无法找到父项并且无法解析该方法。

经过一些调试，我意识到有一个标志 ( instruction.inheritBindingContext )，它决定是否应该包含父级。标志是 true默认情况下用于路由器 View ，但 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 {}

Answer 1

这是故意的。它可以防止开发人员构建不可移植的自定义元素，因为它们依赖于外部范围的特定属性。

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