Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • getJsInitCallsOnce:
    The framework will call these JS functions once per page load. Useful for registering delegated event handlers.

  • getJsInitCallsEach:
    The framework will call these JS functions on page load and each time this view gets injected dynamically during user interactions. Useful for initialising Chosen drop downs, Bootstrap tooltips etc.

...

Later in this article you find a list of built-in AMD modules with useful methods.

Init function names

As a Per convention, CB AMD modules do not execute any code other than returning when they’re loaded. They only return a JS object. For your init function call to work, your module returns an object with a function named accordingly.With the settings in the view’s getJsInitCallsOnce() and ..Each() you can let the framework call one if the module’s methods:

Example of a getJsInitCallsOnce function and AMD module to match:

Code Block
languagephp
function getJsInitCallsOnce() {
	
	// Always return calls of the base class for standard JS calls
	$calls = parent::getJsInitCallsOnce();
	
	// Add one or more calls for your view This will load module 'someModule', but not execute any of its methods 
	$calls[] = 'configbox/custom/someModule';
	
	// Adding ::initMethod, makes the framework load the method and exectute 'initMethod'
	$calls[] = 'configbox/custom/someModule::initMethod';

    return $calls;
}

...

Important when you inject HTML to your page

Use the built-in module If your code injects KenedoView HTML during the user’s interactions, best use configbox/server and its method .injectHtml(). This method handles HTML injection and triggering the framework’s check for initEach calls.

Code Block
cbrequire(['cbj', 'configbox/server'], function($, server) {

  let target = $('.target-div');
  let controller = 'mycontroller'; // name of your KenedoController
  let task = 'returnMyHtml'; // name of your controller's
task function   let data = {
    "id": 1
  }
  let callback = function() {
    console.log('HTML injected');
  }

  server.injectHtml(target, controller, task, data, callback);
    
});

Once the HTML is injected (and if the HTML is a KenedoView), then any CSS and AMD initEach calls will be made automatically.

Alternatively you can trigger the event ‘cbViewInjected’ on the document after the HTML has been injected:

Code Block
languagejs
cbrequire(['cbj'], function($) {
  $(document).trigger('cbViewInjected');
});

Creating an AMD module

An AMD module is a regular JS file with some structure.

...