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）中的按钮调用父父的父（<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 {}

Answer 1

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

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

Aurelia - 默认情况下，自定义元素不会继承绑定上下文。好吗？

1 个答案: