Closures in Typescript

Question

I have Angular2/Typescript website. I am using PrimeNG frameowrk for CSS. In my site I have jQuery full calendar. What I want to achive is when event is clicked - modal appears.

In AfterViewInit interface method I have created fullClendar object as below:

  $("#calendar").fullCalendar({
   //..some properties
   eventClick: function (calEvent) {
                this.display = true;
    }

  })

display is field on this component class. When display is set to true modal should appear - setting it to true doesnt show modal.

However I have button in the same page which has onClick handler

public showDialog() {
        this.display = true;
    }

Clicking the button show the modal.

There is HTML

<div class="ui-g dashboard" style="margin-top: -18px">

  <div class="ui-g-12 ui-md-12">
    <div class="card">
      <div id="calendar"></div>
    </div>
  </div>
</div>
<p-dialog header="Godfather I" [(visible)]="display" modal="modal" width="300" responsive="true">
  <p>dadsasd</p>
  <p-footer>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
      <button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>
      <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button>
    </div>
  </p-footer>
</p-dialog>
<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></button>

What is the problem ?

What do you expect `this` to refer to? The click handler is called without a `this` binding, so it will be the global object (`window`) in sloppy mode, or `undefined` in strict mode. — trincot, Apr 30 '17 at 19:47

score 3 · Accepted Answer · answered Apr 30 '17 at 19:59

3

Jquery most likely sets the element with id #calendar as this.

You can use an arrow function instead to make keep the same context.

$("#calendar").fullCalendar({
  //..some properties
  eventClick: (calEvent) => {
    this.display = true;
  }

})

answered Apr 30 '17 at 19:59

toskv

26,120
7
64
66

Afff thats right simply forgot abotut jQuery this keyword! – miechooy Apr 30 '17 at 21:07
1

there's no special jquery this keyword, it's javascript you may want to read more about it http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work – toskv Apr 30 '17 at 21:16

Closures in Typescript

1 Answers1