DHTMLX Gantt in LWC

Question

Ich implementiere DHTMLX Gantt Chart in LWC. Ich versuche, eine LWC-Methode aus der Gantt-Bibliotheksfunktion aufzurufen, aber sie funktioniert nicht.

Hier ist der Code:

<template>
    <input type="hidden" id="hidden-task-data" onclick={openModal}/>
    <div class="thegantt" lwc:dom="manual" style='width:100%;'></div>
</template>

this.isModalOpen = false;

renderedCallback() {
    Promise.all([
            loadScript(this, DHTMLX7 + '/codebase/dhtmlxgantt.js'),
            loadStyle(this, DHTMLX7 + '/codebase/dhtmlxgantt.css')
    ]).then(() => {
        const root = this.template.querySelector('.thegantt');
        root.style.height = "300px";
        const gantt = window.Gantt.getGanttInstance();

        //This method is called when a user double clicks on a task bar of the chart
        gantt.attachEvent("onTaskDblClick", function(id, e) {
            /* As per LWC's documentation, this doesn't work
            let taskInput = document.getElementById("hidden-task-data");
            taskInput.value = e;
            taskInput.click();
            */
            this.openModal(); //This doesn't work
            return true;
        });
    });
}

openModal() {
    this.isModalOpen = true;
    console.log(this.isModalOpen);
}

Die openModalMethode wird nicht aufgerufen, da sie thiskeine gültige Referenz in der Gantt-Bibliothek ist. Ich habe versucht, document.getElementByIdwas auch nicht funktioniert. Wie kann ich das erreichen?

Answer 1

Wenn Sie versuchen, thisin einem callback functionKontext Änderungen vorzunehmen, und Sie den Verweis auf die Klasseninstanz verlieren, lesen Sie hier

Die alte Lösung besteht darin, einen Verweis auf this(Klasseninstanz) in einer separaten Variablen ( selfim Beispiel) zu speichern und im Rückruf zu verwenden

Die moderne Lösung besteht darin, die Pfeilfunktion zu verwenden, die keinen eigenen thisKontext hat und sich auf den Klassenkontext bezieht

renderedCallback() {
    Promise.all([
            loadScript(this, DHTMLX7 + '/codebase/dhtmlxgantt.js'),
            loadStyle(this, DHTMLX7 + '/codebase/dhtmlxgantt.css')
    ]).then(() => {
        const gantt = window.Gantt.getGanttInstance();

        // Using Arrow function
        gantt.attachEvent("onTaskDblClick", (id, e) => {
            this.openModal();
        });

        // Storing reference of this in another variable
        const self = this;
        gantt.attachEvent("onTaskDblClick", function(id, e) {
            self.openModal();
        });
    });
}