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));