I am trying to render my aurelia view dynamically, using compose within repeater and it is working fine but my two way binding not working. The view that is getting rendered using compose element doesn't update the property of parent view model.
my code for parent view js file is
export class Index {
public _items: interfaces.IBaseEntity[];
public data: string;
constructor() {
this._items = new Array<interfaces.IBaseEntity>();
this._items.push(new Address());
this._items.push(new HomeAddress());
}
activate() {
this._items.forEach((entity, index, arr) => {
entity.init();
});
//this.data = "data";
}
}
my parent html is as below. In this html i got custom element on which my two binding works but not with compose
<template>
<require from="form/my-element"></require>
<div repeat.for="item of _items">
<!--<my-element type.two-way="data" model.two-way="item.model"></my-element>-->
<compose view-model="${item.view}" model.two-way="item.model"></compose>
</div>
</template>
My child view model
import * as interfaces from '../interfaces';
import {useView, bindable} from 'aurelia-framework';
export class Address implements interfaces.IBaseEntity {
public view: string = "form/address";
@bindable model: string;
constructor() {
console.log("address constructed - " + this.model);
}
init = (): void => {
this.model = "Address";
}
activate(bindingContext) {
this.model = bindingContext;
console.log("address ativated - " + this.model);
}
}
and child view html is
<template>
<h2>Address Template</h2>
<input type="text" value.two-way="model" class="form-control" />
</template>
