|
|
@@ -195,6 +195,7 @@ export class Template {
|
|
|
public initPromise: Promise<Template>;
|
|
|
|
|
|
private fragment: DocumentFragment;
|
|
|
+ private htmlTemplate: string;
|
|
|
|
|
|
constructor(public name: string, private _configuration: ITemplateConfiguration) {
|
|
|
this.onInit = new Observable<Template>();
|
|
|
@@ -216,6 +217,7 @@ export class Template {
|
|
|
|
|
|
this.initPromise = htmlContentPromise.then(htmlTemplate => {
|
|
|
if (htmlTemplate) {
|
|
|
+ this.htmlTemplate = htmlTemplate;
|
|
|
let compiledTemplate = Handlebars.compile(htmlTemplate);
|
|
|
let config = this._configuration.params || {};
|
|
|
let rawHtml = compiledTemplate(config);
|
|
|
@@ -228,6 +230,21 @@ export class Template {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ public updateParams(params: { [key: string]: string | number | boolean | object }) {
|
|
|
+ this._configuration.params = params;
|
|
|
+ // update the template
|
|
|
+ if (this.isLoaded) {
|
|
|
+ this.dispose();
|
|
|
+ }
|
|
|
+ let compiledTemplate = Handlebars.compile(this.htmlTemplate);
|
|
|
+ let config = this._configuration.params || {};
|
|
|
+ let rawHtml = compiledTemplate(config);
|
|
|
+ this.fragment = document.createRange().createContextualFragment(rawHtml);
|
|
|
+ if (this.parent) {
|
|
|
+ this.appendTo(this.parent, true);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
public get configuration(): ITemplateConfiguration {
|
|
|
return this._configuration;
|
|
|
}
|
|
|
@@ -246,23 +263,25 @@ export class Template {
|
|
|
return childrenArray;
|
|
|
}
|
|
|
|
|
|
- public appendTo(parent: HTMLElement) {
|
|
|
+ public appendTo(parent: HTMLElement, forceRemove?: boolean) {
|
|
|
if (this.parent) {
|
|
|
- console.error('Already appanded to ', this.parent);
|
|
|
- } else {
|
|
|
- this.parent = parent;
|
|
|
-
|
|
|
- if (this._configuration.id) {
|
|
|
- this.parent.id = this._configuration.id;
|
|
|
+ if (forceRemove) {
|
|
|
+ this.parent.removeChild(this.fragment);
|
|
|
+ } else {
|
|
|
+ return;
|
|
|
}
|
|
|
- this.parent.appendChild(this.fragment);
|
|
|
- // appended only one frame after.
|
|
|
- setTimeout(() => {
|
|
|
- this.registerEvents();
|
|
|
- this.onAppended.notifyObservers(this);
|
|
|
- });
|
|
|
}
|
|
|
+ this.parent = parent;
|
|
|
|
|
|
+ if (this._configuration.id) {
|
|
|
+ this.parent.id = this._configuration.id;
|
|
|
+ }
|
|
|
+ this.fragment = this.parent.appendChild(this.fragment);
|
|
|
+ // appended only one frame after.
|
|
|
+ setTimeout(() => {
|
|
|
+ this.registerEvents();
|
|
|
+ this.onAppended.notifyObservers(this);
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
public show(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template> {
|
|
|
@@ -304,10 +323,21 @@ export class Template {
|
|
|
this.onLoaded.clear();
|
|
|
this.onStateChange.clear();
|
|
|
this.isLoaded = false;
|
|
|
+ // remove from parent
|
|
|
+ this.parent.removeChild(this.fragment);
|
|
|
}
|
|
|
|
|
|
+ private registeredEvents: Array<{ htmlElement: HTMLElement, eventName: string, function: EventListenerOrEventListenerObject }>;
|
|
|
+
|
|
|
// TODO - Should events be removed as well? when are templates disposed?
|
|
|
private registerEvents() {
|
|
|
+ this.registeredEvents = this.registeredEvents || [];
|
|
|
+ if (this.registeredEvents.length) {
|
|
|
+ // first remove the registered events
|
|
|
+ this.registeredEvents.forEach(evt => {
|
|
|
+ evt.htmlElement.removeEventListener(evt.eventName, evt.function);
|
|
|
+ });
|
|
|
+ }
|
|
|
if (this._configuration.events) {
|
|
|
for (let eventName in this._configuration.events) {
|
|
|
if (this._configuration.events && this._configuration.events[eventName]) {
|
|
|
@@ -327,14 +357,21 @@ export class Template {
|
|
|
selector = '#' + selector;
|
|
|
}
|
|
|
let htmlElement = <HTMLElement>this.parent.querySelector(selector);
|
|
|
- htmlElement && htmlElement.addEventListener(eventName, functionToFire.bind(this, selector), false)
|
|
|
+ if (htmlElement) {
|
|
|
+ let binding = functionToFire.bind(this, selector);
|
|
|
+ htmlElement.addEventListener(eventName, binding, false);
|
|
|
+ this.registeredEvents.push({
|
|
|
+ htmlElement: htmlElement,
|
|
|
+ eventName: eventName,
|
|
|
+ function: binding
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
export function getTemplateAsHtml(templateConfig: ITemplateConfiguration): Promise<string> {
|
David Catuhe