Select element using jquery with lockerservice

Question

I'm currently using the fullcalendar lib to show some events on a basic calendar. Although working with lockerService activated, whenever I use the Salesforce Lightning CLI for code validation I get some errors.

Here's a snippet of the code:

loadDataToCalendar :function(component, data){

  // get the div element
  var myDiv = component.find("calendar").getElement();

  // execute fullcalendar function
  $(myDiv).fullCalendar({ //some options and data });

  // call render function to update calendar
  $(myDiv).fullCalendar('render');
}

I get the following errors on the console using CLI:

error secure-window Unexpected $
Line: $(myDiv).fullCalendar({

error no-undef '$' is not defined
Line: $(myDiv).fullCalendar({

error secure-window Unexpected $
Line: $(myDiv).fullCalendar('render');

error no-undef '$' is not defined
Line: $(myDiv).fullCalendar('render');

How can I select a div element, with or without jquery, and call the fullcalendar function while being compliant with the LockerService security architecture? Any workarounds?

Answer 1

This is another case of the CLI tool reporting noise - and your code is fine To date we have not added any additional restrictions in LS from the first day of the pre release of Summer'16 - we have only opened up surface area. As for the CLI the issue is that it had to assume symbols like '$' it's not aware of are dangerous but with the latest version of the CLI you can use lint annotations to let the CLI know that $ is safe.

Answer 2

To skip this kind of validations use the comment: /* globals $ */

For example in your js controller side:

({
    controllerFunction : function(component, event, helper){
        /* globals $ */

        ... rest of your code
    }
})

For more details go here: http://jshint.com/docs/