View-model gets passed, but not model? (RESOLVED)

Help Requests
1

Hello,

I’m banging my head against the walls trying to explain this behaviour.
I’ve been trying to replicate it in that sandbox but everything works properly there. The problem only happens in my “real” app (below).

As you can see from the sandbox, I want to use <compose> and then use a view model that matches the model. It might be a bit overkill but that will be a problem for later. For now I need to understand what doesn’t work.

My “real” project is like this :

===========================================

File item-model.ts

export class ItemModel {
    public text: string;

    constructor(text: string) { 
           this.text = text;
    }
}

File item-view-model.ts

export class ItemViewModel {
    @bindable public model: { text: string };

    constructor() { }

    public activate(model: ItemModel) {
       this.model = model;
     }
}

File item-view-model.html :

<template>
    <div>THE TEXT IS MISSING: ${model.text}</div>
</template>

File menu.ts:

@autoinject
export class Menu{

    constructor( ) {    }

    @computedFrom("something that is not in this code excerpt")
    get items(): ItemViewModel[] {
        console.log("get items got called!");
        return [
               {
                      model: item, // of type ItemModel
                      vm: "item-view-model"
               }
        ];
    }
}

File menu.html :

<template>
    <require from="./item-view-model"></require>
        <template repeat.for="item of items">
           <div>THE TEXT WORKS ${item.model.text}</div>
            <compose
                model.bind="item.model"
                view-model.bind="item.vm"
            >
            </compose>
        </template>
</template>

========================================

What I observe is this :

  • I do get the items in get items()
  • The “model” and “vm” fields do get populated in the result of get items() (a console.log proves it)
  • I also observe that menu.html is able to somewhat generate the composition because I see the text “THE TEXT IS MISSING” displayed.

However something seems to be broken when it comes to field “model”.

  • I do see the text “THE TEXT WORKS” being displayed, along with the text’s value next to it.
  • But inside item-view-model.html there is only “THE TEXT IS MISSING.” The text’s value next to it remains undefined.

I don’t understand the difference between this and the sandbox.

2

Someone has explained to me that I don’t need to pass the model, despite the example in the sandbox.

Step by step :

  • In get items() of menu.ts, just return “new ItemViewModel(...)” (poor name, by the way, as it’s not really a view model),
  • then in menu.html pass that into view-model.bind=....
  • finally, let Aurelia find the corresponding html file automatically (because of the naming convention).

The “require” is not even needed.