CODEWITHSUNDEEP
aurelia
Erythros
Erythros

Reputation: 127

ViewModel-less compose with model.bind in aurelia

I am having a structure where the main view composes a partial view that composes another partial view in a repeater.

Example:

main view

<template>
    <h1>${factory.name}</h1>
    <div class="column">
        <compose view="./cars.html"></compose>
    </div>
</template>

cars view

<template repeat.for="car of factory.cars">
    <compose view="./specifications.html model.bind="{test: 'abc}"></compose>
</template>

specifications view

<template repeat.for="car of factory.cars">
    <h1>${$parent.$parent.factory.name} - ${car.name}</h1>
    ${test}
</template>

The problem I am facing is that the model.bind in compose doesn't work. I tried it with the test above, but what I'd actually want to pass there is $parent.$parent.factory so I can output $parent.$parent.factory.name in the specifications view.

(I know I can print it like this, but the scenario gets way more complicated so the binding is necessary)

Worth to mention that both specifications and cars view are viewmodel-less. Only themain view has a viewmodel where factory and cars are coming from.

According to this page, what I am trying to do is possible, but I can't wrap my head about what I'm doing wrong.

Upvotes: 1

Views: 577

Answers (2)

Erythros
Erythros

Reputation: 127

What @Jeff G said is correct, but for my specific use-case what solved my issue was creating a simple view-model that I could use for all compositions. It's looking like:

export class Main {
    public parentFactory;

    public activate(data) {
        this.parentFactory= data;
    }
}

And in the view

    <compose
        view="./car.html"
        view-model="../view-models/main"
        model.bind="$parent.$parent.factory">
    </compose>

Upvotes: 0

Jeff G
Jeff G

Reputation: 2175

When composing with just an html file, the view-model for the referenced html file is the same as where the compose element is placed. In other words, it inherits the view-model of the parent. So you don't need to supply the model.

main view

<template>
    <h1>${factory.name}</h1>
    <div>
        <compose view="./cars.html"></compose>
    </div>
</template>

cars.html

<template>
  <div  repeat.for="car of factory.cars">
    <compose view="./specifications.html"></compose>
  </div>
</template>

specifications.html

<template>
    <h1>${factory.name} - ${car.name}</h1>
</template>

Take a look at this GistRun example.

Upvotes: 1

Related Questions