Access model in view model in Aurelia Compose

Question

So according to the heading Dynamically Render UI into the DOM based on Data here (scroll down a bit).

<template repeat.for="item of items">
    <compose model.bind="item" view-model="widgets/${item.type}"></compose>
</template>

If you take it more simply:

<compose model.bind="item" view-model="itemViewModel.js"></compose>

If I have an itemViewModel.html and a itemViewModel.js , they both get successfully loaded. However, how do you access the bound model in the itemViewModel.js ?

I tried using the bindable .

import {bindable, bindingMode} from 'aurelia-framework';

export class ItemViewModel {
    @bindable model;

    constructor() {
        console.log("using bindable", this);
    }
}

Is this possible?

Answer 1

<compose model.bind="item" will call a method activate(model) in your viewmodel and give you the item .

// the model received here is the *item* from the above <compose
activate(model){
   this.model = model;
}

If you want to pass multiple models in the bind you can do

<compose model.bind="{item: item, value: value}"

Then you get:

activate(model){
    this.item = model.item;
    this.value = model.value;
}