A menudo tengo el problema de que no puedo acceder a las Funciones de mis clases js dentro de la clase js. Principalmente lo soluciono con esto. o un enlace (esto), pero ¿por qué esto no funciona? es la copia exacta de la forma en que hago esto en otra clase.
class Page { // constructor and props ShowNewJobPopup() { var popupNewJobElement = $("<div>").attr("id", "popupNewJob"); console.log(data, element); } InitializeFilterElements(filterItems) { filterItems["Control"].Items.push({ Template: function (itemElement) { itemElement.append("<div id=\"btnNeuerJob\" style=\"width: 100%; margin-top: 4px;\"></div>"); $("#btnNeuerJob").dxButton({ type: "default", text: "Neuer Job", disabled: false, onClick: function () { this.ShowNewJobPopup(); // how is this not a function }.bind(this) }); } }); return filterItems; } }cuando estoy en la consola de desarrollo. puedo escribir Page.ShowNewJobPopup (Page es el script al que está adjunto)
this en realidad no es de la página de clase.
Reescribimos su clase de página de la siguiente manera y puede ver que this se refiere al obj .
class Page { constructor() {} ShowNewJobPopup() { var popupNewJobElement = $("<div>").attr("id", "popupNewJob"); console.log(data, element); } InitializeFilterElements(filterItems) { const obj = { Template: function (itemElement) { itemElement.append( '<div id="btnNeuerJob" style="width: 100%; margin-top: 4px;"></div>' ); $("#btnNeuerJob").dxButton({ type: "default", text: "Neuer Job", disabled: false, onClick: function () { this.ShowNewJobPopup(); }.bind(this), // this is referred to obj }); }, }; filterItems["Control"].Items.push(obj); return filterItems; } } Lo que puede hacer es crear una variable self para almacenar this y usarla para hacer referencia a la página de clase más adelante.
class Page { constructor() {} ShowNewJobPopup() { var popupNewJobElement = $("<div>").attr("id", "popupNewJob"); console.log(data, element); } InitializeFilterElements(filterItems) { const self = this; // this here is referred to the class Page const obj = { Template: function (itemElement) { itemElement.append( '<div id="btnNeuerJob" style="width: 100%; margin-top: 4px;"></div>' ); $("#btnNeuerJob").dxButton({ type: "default", text: "Neuer Job", disabled: false, onClick: function () { self.ShowNewJobPopup(); // self is referred to Page Class }, }); }, }; filterItems["Control"].Items.push(obj); return filterItems; } }Parece this tiene varias funciones con diferentes contextos anidados entre sí. Sería mucho más simple simplemente crear una variable en la parte superior de su método de clase en lugar de preocuparse por pasar el contexto correcto a cada función.
InitializeFilterElements(filterItems) { const thisPage = this; // SET THE VARIABLE filterItems["Control"].Items.push({ Template: function (itemElement) { itemElement.append("<div id=\"btnNeuerJob\" style=\"width: 100%; margin-top: 4px;\"></div>"); $("#btnNeuerJob").dxButton({ type: "default", text: "Neuer Job", disabled: false, onClick: function () { thisPage.ShowNewJobPopup(); } }); } }); return filterItems; }El valor de this está determinado por cómo se llama a una función (enlace en tiempo de ejecución). No se puede establecer mediante asignación durante la ejecución y puede ser diferente cada vez que se llama a la función.
InitializeFilterElements(filterItems) { const self = this; // self now holds the value of this reference filterItems["Control"].Items.push({ Template: function (itemElement) { itemElement.append("<div id=\"btnNeuerJob\" style=\"width: 100%; margin-top: 4px;\"></div>"); $("#btnNeuerJob").dxButton({ type: "default", text: "Neuer Job", disabled: false, onClick: function () { self.ShowNewJobPopup(); } }); } }); return filterItems; }