When your app has more than one screen, you will need to follow some simple programming conventions to prevent the mess. Here's what I created for my app. The View pattern looks like this:
import { $at } from './view'
const $ = $at( '#timer' );
class Timer extends View {
el = $();
onMount(){
clock.granularity = "seconds";
clock.ontick = this.onTick;
}
ticks = 0;
onTick = () => {
this.ticks++;
this.render();
}
minutes = $( '#minutes' );
seconds = $( '#seconds' );
render(){
const { ticks } = this;
this.minutes.text = Math.floor( ticks / 60 );
this.seconds.text = ( ticks % 60 ).toFixed( 2 );
}
onUnmount(){
clock.granularity = "off";
clock.ontick = null;
}
}
Feel free to use, I shared it under MIT license.
https://github.com/gaperton/ionic-views
