Objects and methods available to JavaScript modules

CKAN makes a few helpful objects and methods available for every JavaScript module to use, including:

  • this.el, the HTML element that this instance of the object was initialized for. A jQuery element. See this.options and this.el.

  • this.options, an object containing any options that were passed to the module via data-module-* attributes in the template. See this.options and this.el.

  • this.$(), a jQuery find function that is scoped to the HTML element that the JavaScript module was applied to. For example, this.$('a') will return all of the <a> elements inside the module’s HTML element, not all of the <a> elements on the entire page.

    This is a shortcut for this.el.find().

    jQuery provides many useful features in an easy-to-use API, including document traversal and manipulation, event handling, and animation. See jQuery’s own docs for details.

  • this.sandbox, an object containing useful functions for all modules to use, including:

    • this.sandbox.client, an API client for calling the API
    • this.sandbox.jQuery, a jQuery find function that is not bound to the module’s HTML element. this.sandbox.jQuery('a') will return all the <a> elements on the entire page. Using this.sandbox.jQuery is discouraged, try to stick to this.$ because it keeps JavaScript modules more independent.

    See JavaScript sandbox reference.

  • A collection of jQuery plugins.

  • Pubsub functions that modules can use to communicate with each other, if they really need to.

  • Bootstrap’s JavaScript features, see the Bootstrap docs for details.

  • The standard JavaScript window object. Using window in CKAN JavaScript modules is discouraged, because it goes against the idea of a module being independent of global context. However, there are some circumstances where a module may need to use window (for example if a vendor plugin that the module uses needs it).

  • this._ and this.ngettext for string internationalization. See Internationalization.

  • this.remove(), a method that tears down the module and removes it from the page (this usually called by CKAN, not by the module itself).