CODEWITHSUNDEEP
javascriptaurelia
Callum Linington
Callum Linington

Reputation: 14417

Access model in view model in Aurelia Compose

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?

Upvotes: 3

Views: 1788

Answers (1)

Corneliu
Corneliu

Reputation: 858

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

Upvotes: 4

Related Questions