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()
(aconsole.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.