Aurelia <compose> model.bind what triggers a change event? -

in aurelia have ability dynamically compose viewmodels , views using <compose> element. can supply object of data via model.bind accessible via activate method of provided viewmodel.

my question is, conditions trigger change event on provided model data? if change property on object provide, activate method gets object first parameter see change? or entire object need replaced trigger change?

the activate(model) gets called once when model bound view model. when model attributes change, changes reflected in composed view model because model reference, not copy.

for example, have view / view model target route follows (this example not clean example because experimenting other things well, should clear enough):

view: view creates 2 sections separated <hr>. top displays model.message each view. bottom creates <compose> each view.

<template>   <div repeat.for="view of openviews">     <p>${view.model.message}</p>   </div>   <hr>   <div repeat.for="view of openviews">     <compose view-model.bind="$parent.getviewfromtype(view)" model.bind="view.model">     </compose>   </div> </template> 

view model: note openviews @ global scope. if navigate away route , return route, changes made view.model retained. if model on zenstudio object, object gets destroyed , recreated when route moves away , returns view , therefore lose data.

var openviews = [   { viewtype: "", model: { message: "view 1"}},   { viewtype: "", model: { message: "view 2"}},   { viewtype: "", model: { message: "view 3"}} ];  export class zenstudio {   constructor() {   }    created() {   }    openviews() {     return openviews;   }    getviewfromtype(view) {     // tood load plugins , use views defined plugins     return "./views/editor-view";   } } 

the editor-view view , view-model follows:

<template>   <h1>${model.message}</h1>   <form>     <input type="text" value.bind="model.message">   </form> </template> 

view-model:

export class editorview {   constructor() {   }    created(owningview, thisview) {     this.view = thisview;     this.parentview = owningview;   }    activate(model) {     // keep track of model     this.model = model;   } } 

you'll see zenstudio view displaying same model.message editorview. when user edits value of message inside <input>, values correctly change in top level view, within corresponding <compose> view.

while don't have example, if added item openviews list add sub view , line in top level view displaying new message. repeat.for listens additions , subtractions made list , correctly creates / removes composed elements.

hopefully answers question.