CODEWITHSUNDEEP
aurelia
Pranay Verma
Pranay Verma

Reputation: 135

Aurelia - compose view

I am totally new to this framework. Going through all Docs I have successfully configure Aurelia framework using visual studio and type script. I want to know how to compose a view inside another view and and initialize its view model from its parent.

For example: Here in navigation skeleton we have one view as welcome displaying first name and second name with submit button. Now I created one Route name it as MyApp inside this I want to compose welcome view and i want to pass first name and second name to its view model.

Please let me know how to do that? This is how my Html MyApp looks like:

<template>
    <import from='welcome'></import>
    <section class="au-animate">       
      <compose view-model="welcome"></compose>
    </section>
</template>

This is How View Model is :

import {inject} from 'aurelia-framework';
import refWelcome = require("welcome");

@inject(refWelcome)
export class myApp {
    vm;
    title: string;
    constructor(refWelcome) {
        this.title = "My App Demo";
        this.vm = refWelcome;

        console.log(this.vm);
    }
}

This is view model for welcome view:

import {computedFrom} from 'aurelia-framework';

export class Welcome{
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';
  previousValue = this.fullName;

  constructor(fname: string, lname: string) {
      if (fname != null || lname != null) {
          this.firstName = fname;
          this.lastName = lname;
      }
  }
}

Upvotes: 3

Views: 1722

Answers (1)

PW Kad
PW Kad

Reputation: 14995

I think you have a few issues in your code -

  1. You need to fix the syntax for your myApp's title property.
  2. Conventionally you should name your classes PascalCase.
  3. You can't use a standard HTML import at the moment, you need to use require if you are requiring a custom element

To compose the view you can use two methods -

  1. Compose custom element (require not required)

     <template>
     <section class="au-animate">       
       <compose view-model="./welcome"></compose>
     </section>
 </template>

No idea why that won't display without the backticks

  1. As a custom element 

    <template>
    <require from='welcome'></require>
    <section class="au-animate">       
      <welcome></welcome>
    </section>
</template>

Upvotes: 4

Related Questions