I am implementing a scenario in which on clicking outside the drawer, i want to execute the saveChange action but somehow it is giving me the error that saveChange is not a function. I tried different ways to set the context but it is not working.
export default class DrawerModel {
constructor(context) {
this.data = context.primaryInfoData;
this.name = ko.observable('test');
document.addEventListener("click", function (e) {
var self= this;
var element = e.target;
let isOutside = true;
for (var element = e.target; element; element = element.parentNode) {
if (element.id === 'drawer_primaryInfoDrawer') {
isOutside = false;
}
}
if(isOutside) {
self.saveChanges();
}
});
}
saveChanges() {
const data = {
title: this.name(),
}
this.data.valueChangeHandler(data);
};
}
Error :
Uncaught TypeError: self.saveChanges is not a function
Answer
this is because in your event listener, this refers to the window instead of your class. you can fix this by adding .bind(this) to your function like so:
document.addEventListener("click", function (e) {
// ...
}.bind(this));