Aurelia: variable not printed in user component

Question

weather.ts file

import {bindable} from 'aurelia-framework';

export class Weather {
  cityName: string = 'Hilsinki';
  constructor() {
    this.cityName = 'Hilsinki';
  }
}

weather.html file

<template>
        City XName: ${cityName}
</template>

When I print a component in any file, the cityName variable is not printed. I have been trying this for the last three days, 12 hours a day.

Any help is appreciated

UPDATE: Using a component in welcome.html

<template>
    <require from = "./components/weather.html"></require>
    <weather view-model="Weather"></weather>
</template>

also imported the component in welcome.ts as

import { Weather } from './components/weather';

Answer 1

You did not use requirea view model, just a view.

<require from = "./components/weather.html"></require>

If you want both a view and a viewmodel, try instead:

<require from = "./components/weather"></require>

Answer 2

welcome.ts

import { useView } from 'aurelia-framework';

@useView('[path]/*.html')

welcome.html

<require from="[path]/*.html"></require>

http://aurelia.io/docs/templating/basics#composition