import { Model } from '../models/Model' ; export abstract class View < T extends Model < K > , K > { regions : { [ key ] : Element ; } = { } ; constructor ( public parent , public model ) { this . bindModel ( ) ; } abstract template ( ) ; regionsMap ( ) { return { } ; } eventsMap ( ) { return { } ; } bindModel ( ) { this . model . on ( 'change' , ( ) => { this . render ( ) ; } ) ; } bindEvents ( fragment ) { const eventsMap = this . eventsMap ( ) ; for ( let eventKey in eventsMap ) { const [ eventName , selector ] = eventKey . split ( ':' ) ; fragment . querySelectorAll ( selector ) . forEach ( element => { element . addEventListener ( eventName , eventsMap [ eventKey ] ) ; } ) ; } } mapRegions ( fragment ) { const regionsMap = this . regionsMap ( ) ; for ( let key in regionsMap ) { const selector = regionsMap [ key ] ; const element = fragment . querySelector ( selector ) ; if ( element ) { this . regions [ key ] = element ; } } } onRender ( ) { } render ( ) { this . parent . innerHTML = '' ; const templateElement = document . createElement ( 'template' ) ; templateElement . innerHTML = this . template ( ) ; this . bindEvents ( templateElement . content ) ; this . mapRegions ( templateElement . content ) ; this . onRender ( ) ; this . parent . append ( templateElement . content ) ; } }