LHTML में DHTMLX Gantt

Question

मैं LWC में DHTMLX गैंट चार्ट को लागू कर रहा हूं । मैं गैन्ट लाइब्रेरी फ़ंक्शन से LWC विधि को कॉल करने का प्रयास कर रहा हूं, लेकिन यह काम नहीं कर रहा है।

यहाँ कोड है:

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

openModalविधि कहा जाता है नहीं है, क्योंकि thisगैंट पुस्तकालय में एक मान्य संदर्भ नहीं है। मैंने कोशिश की है document.getElementByIdजो या तो काम नहीं कर रहा है। इसे प्राप्त करने के तरीके क्या हैं?

Answer 1

जब आप उपयोग करने का प्रयास thisएक में callback functionऔर वर्ग उदाहरण के लिए आप ढीला संदर्भ संदर्भ में परिवर्तन, यहाँ पढ़

पुराना समाधान एक संदर्भ this(उदाहरण में) को एक अलग चर में स्टोर करना है ( selfउदाहरण में) और कॉलबैक में इसका उपयोग करना है

आधुनिक समाधान एरो फ़ंक्शन का उपयोग करना है जिसका अपना thisसंदर्भ नहीं है और वर्ग के संदर्भ को संदर्भित करता है

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