Any idea what (0, _jquery["default"]) means in terms of jQuery selector or function?

Question

I am trying to get some jQuery working on an offline page. The site's app uses EmberJS, RequireJS, and who knows what else, but the bottom line is I am trying to replace this cryptic code with plain jQuery.

Here is some HTML that should respond to interaction:

Loading interaction... RevealContent Some question Some answer

So it is just a show/hide interaction.

The app's code is

define("site/mixins/interactions/reveal_content", ["exports", "jquery"], function (exports, _jquery) {

  function RevealContent($el) {
    this.el = $el;

    this.interactionData = $el.find(".interaction_data");
    this.container = $el.find(".interaction_content");
  }

  RevealContent.prototype = {
    init: function init() {
      var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
      var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());

      this.container = this.container.parent().find('.RevealContent');

      this.container.append(initialContent);
      this.container.append(contentToReveal.hide());

      initialContent.click(function () {
        (0, _jquery["default"])(contentToReveal).slideToggle('slow');
      });

      // prevent any links within initialContent from navigating anywhere
      initialContent.find('a').click(function (e) {
        e.preventDefault();
      });
    }
  };

I have started trying to replace the above with plain jQuery but am having a hard time decoding some of the above code, such as (0, _jquery["default"])

Does anyone know how I can convert above to plain jQuery, such that there is no external dependency, no required communication with the app?

Here is a jfiddle with some HTML and with the original code.

https://jsfiddle.net/0s6xdk9q/1/

Here is what I have done so far as far with the rewrite:

$(document).ready(function() {
    $(this).on('click', '.interaction_booted', function () {
    //console.log('made it here');


        interactionData = $(this).find(".interaction_data");
        this.container = $(this).find(".interaction_content");

        var contentToReveal = $('<div />', this.container).append($(interactionData.find('tdd')[1]).detach());
        var initialContent = $('<div class="pointer" />', this.container).append($(interactionData.find('tdd')[0]).detach());

        this.container = this.container.parent().find('.RevealContent');

        this.container.append(initialContent);
        this.container.append(contentToReveal.hide());

        initialContent.click(function () {
            $(contentToReveal).slideToggle('slow');
        });

    });


});

Note I am using instead of that is because Chrome is stripping the tags since they don't have parent... I have confirmed that in my local page, interactionData and this.container are returning same things as the remote version of the page.

But those contentToReveal and initialContent vars are throwing me off. I just don't understand the syntax and the use of this prototype business such that I can figure out the rest of the jQuery code needed.

Does anyone knows what I need to do to get this working?

Thanks a ton! Brian

Answer 1

The comma here is the comma operator. It merely evaluates the expression on the left side, followed by the right side, returning the result of right hand expression.

So what's this (0, ...) syntax doing here? Well it exists here to strip the function from it's parent object so it's no longer a method call, essentially unbinding this within the context of the method. Observe:

// ECMAScript 2015
var obj = {
  foo() {
    return this;
  }
}

console.log(obj.foo() === obj);
console.log((0, obj.foo)() === obj);

This is a trick that Babel other transpilers use to make sure that functions imported as bare functions are called as functions and not as methods on the modules from which they are imported. In other words,

(0, _jquery["default"])(...)

Is equivalent to

$(...)

Where $ is the jQuery function.