从jQuery函数调用js方法

Question

我想从eventRender函数回调中调用handleContextEdit方法我已经尝试过了。handleContextEdit(event(；但它不起作用。请帮帮我。

export default class FullCalendarJs extends LightningElement {
initialiseFullCalendarJs() {

const ele = this.template.querySelector('div.fullcalendarjs');

$(ele).fullCalendar({
// this.calendar = new FullCalendar.Calendar(ele,{
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//themeSystem:'bootstrap3',
plugins: [ 'momentTimezone' ],
defaultDate: moment(),

navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: this.programEventList,

eventRender:function(event, element){
var originalClass = element[0].className;
element[0].className = originalClass + ' hasmenu';
$(ele).contextMenu({
selector: '.hasmenu', 
callback: function(key, options,e) {

this.handleContextEdit(event); //this is undefined here
},
items: {
"view": {name: "View", icon: "view"},
"edit": {name: "Edit", icon: "edit"}, 
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: function(){
return 'context-menu-icon context-menu-icon-quit';
}}
}
});
}
});
$(ele).fullCalendar('render');
}
handleContextEdit(event){
console.log(event);
}
}

我想从我尝试过的eventRender函数回调中调用handleContextEdit方法。handleContext Edit(event(；但它不起作用。请帮帮我。谢谢

Answer 1

尝试以下代码

this.handleContextEdit(event);可能不包含组件的引用

因此，您在开始时创建变量来保存this上下文

在下面的例子中，我创建了一个变量self

let self = this;

并且函数调用看起来是self.handleContextEdit(event);而不是this.handleContextEdit(event);

export default class FullCalendarJs extends LightningElement {
initialiseFullCalendarJs() {
const ele = this.template.querySelector('div.fullcalendarjs');
let self = this;
$(ele).fullCalendar({
// this.calendar = new FullCalendar.Calendar(ele,{
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//themeSystem:'bootstrap3',
plugins: [ 'momentTimezone' ],
defaultDate: moment(),
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: this.programEventList,

eventRender:function(event, element){
var originalClass = element[0].className;
element[0].className = originalClass + ' hasmenu';
$(ele).contextMenu({
selector: '.hasmenu', 
callback: function(key, options,e) {
self.handleContextEdit(event); 
},
items: {
"view": {name: "View", icon: "view"},
"edit": {name: "Edit", icon: "edit"}, 
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: function(){
return 'context-menu-icon context-menu-icon-quit';
}}
}
});
}
});
$(ele).fullCalendar('render');
}
handleContextEdit(event){
console.log(event);
}
}