aurelia: variable is not getting printed in custom 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 the component in any file, the cityName variable is not getting printed. I am trying this for last three days 12 hours a day.

Any kind of help is appreciated

UPDATE: Utilizing the 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 didn't require the viewmodel, only the view.

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

If you want both the view and the viewmodel, require it like this instead:

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