2

每个视图模型在其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 {}
4

1 回答 1

2

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

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

于 2016-09-07T15:13:29.420 回答