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
    • Internationalization functions
    • 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.i18n, a helper function for getting localized strings from this.options. English strings marked for translation can be added to the module’s this.options object, and this.i18n() can be called to retrieve the localized version of a string according to the current user’s language. 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).