*.js

import {inject} from 'aurelia-framework';
import {Validation} from 'aurelia-validation';

@inject(Validation)
export class Person{

  firstName = 'Dave';
  lastName = 'Simmons';

  constructor(validation) {
    this.validation = validation.on(this)
      .ensure('firstName')
      .isNotEmpty()
      .hasMinLength(3)
      .hasMaxLength(10);

      console.log("constructore for Person called");

      console.log(this.wibble());
  }

  get fullName(){
    return `${this.firstName} ${this.lastName}`;


  wibble() {
    return "blah, blah, blah";
  }
}



import {vcomputedFrom} from 'aurelia-framework';
import {inject} from 'aurelia-framework';
import {Validation} from 'aurelia-validation';
import {Person} from 'person';

@inject(Validation, Person)
export class Welcome{

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

  constructor(validation, Person) {
    this.validation = validation.on(this)
      .ensure('firstName')
      .isNotEmpty()
      .hasMinLength(3)
      .hasMaxLength(10);

      console.log("Welcome:", Person.lastName);
      this.person = Person;
      console.log("calling wibble", this.person.wibble());
    }

  //Getters can't be observed with Object.observe, so they must be dirty checked.
  //However, if you tell Aurelia the dependencies, it no longer needs to dirty check the property.
  //To optimize by declaring the properties that this getter is computed from, uncomment the line below.
  //@computedFrom('firstName', 'lastName')
  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }

  submit(){
    this.validation.validate()
      .then(() => {
        this.previousValue = this.fullName;
        alert(`Welcome, ${this.fullName}!`);
      });
  }

  canDeactivate() {
    if (this.fullName !== this.previousValue) {
      return confirm('Are you sure you want to leave?');
    }
  }
}

export class UpperValueConverter {
  toView(value){
    return value && value.toUpperCase();
  }
}