javascript - Aurelia - custom element does not inherit binding context by default. Is it okay? -

each view-model gets 2 parameters in bind() method: bindingcontext , overridecontext. first 1 describes current scope, second outer scope(s): parent, parent's parent, etc. looks that:

overridecontext: {     bindingcontext: {...}, //current level     parentoverridecontext: {         bindingcontext: {...}, //parent's binding context         parentoverridecontext: {...} //and on     } } 

this lets view-model access methods , fields parents' scopes well.

if custom element created, receives expected bindingcontext , overridecontext parameters in bind(). when passes them child(ren), not in expected format, but:

overridecontext: {     bindingcontext: {...}, //current level, ok     parentoverridecontext: null,     __parentoverridecontext: {...}, //this real } 

note original parentoverridecontext has been moved __parentoverridecontext. in way, templating engine won't able resolve parents' scope. let's have concrete example:

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

here i'd call method defined on parent's parent (mypage) button in innermost view-model (<custom-element-2>), due different format, templating cannot find parent , cannot resolve method.

after debugging, i've realized there flag (instruction.inheritbindingcontext), determines if parent should included or not. flag true router-views default, false custom elements. question: not understanding correctly , is desired behaviour? or bug?

anyway, if interested, flag can changed:

import {customelement, processcontent} 'aurelia-templating';  @processcontent((compiler, resources, node, instruction) => {     instruction.inheritbindingcontext = true;     return true/false; }) @customelement('custom-element-1') export class customelement1 {} 

this intentional. prevents developers building custom elements not portable because rely on specific properties of outer scope.

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