import { AbstractView, DomEvent } from "sophie-view";
 
class MyView extends AbstractView
{
    protected events: DomEvent[] = [
        { name: 'click', queries: ['#view'], callback: this.onEventCallback },
        { name: 'click', queries: ['.foo'], callback: this.onEventCallback2 },
    ];
 
    public constructor (el: HTMLElement)
    {
        super(el);
    }
 
    private onEventCallback (e: MouseEvent): void
    {
        console.log('Click on #view element', e);
    }
 
    private onEventCallback2 (e: MouseEvent): void
    {
        console.log('Click on .foo element', e);
    }
}
 
const domElement = document.getElementById('view');
 
const myView = new MyView(domElement);
// Now:
// a click on the div with id "view" will log 'Click on #view element'
// and a click on the div with class "foo" will log 'Click on .foo element'
 
setTimeout(() => myView.detachEvents(), 5000);
// After 5 seconds all event listeners are removed

import { MustacheHttp, MustacheString } from "sophie-mustache-template-engine";
import { AbstractRenderableView, DomEvent, TemplateEngine } from "sophie-view";
 
export class MyRenderableView extends AbstractRenderableView
{
    protected events: DomEvent[] = [];
 
    public constructor (el: HTMLElement, templateEngine: TemplateEngine)
    {
        super(el, templateEngine);
    }
}
 
const domElementView1 = document.getElementById('view');
const domElementView2 = document.getElementById('view');
 
// Using from the module sophie-mustache-template-engine the class
// MustacheString we can render a string with HTML into our view
const viewRenderableWithString = new MyRenderableView(
    domElementView1,
    new MustacheString('<div>Hello {{name}}!!</div>'),
);
 
// Or with MustacheHttp we can simply download a template from the path given
const viewRenderableWithHTMLTemplate = new MyRenderableView(
    domElementView2,
    new MustacheHttp('./template.html'),
);
 
// The method render returns a Promise so you can control when the
// template has been render
 
viewRenderableWithString.render({ name: 'world'})
    .then(() => console.log('Render done'))
    .catch((error) => console.log(error));
 
viewRenderableWithHTMLTemplate.render({ name: 'world'})
    .then(() => console.log('Render done'))
    .catch((error) => console.log(error));