Playing Around with Bootstrap Object

Bootstrap is an object  with all the necessary data for displaying a certain page. It's data is outputted in console on every load:

 

You might need something from this object, but the problem is that Bootstrap is not globally available:

 

We also couldn't know at which point of time is it loaded so we could require it:

bootstrap = require('bootstrap');

 


Dispatching Bootstrap

It is quite easy to implement event dispatcher which we can listen and it will tell us when Bootstrap is loaded. First you need to find where in the files the load happens:

grep -Rin "console.log('bootstrap', Bootstrap);" engine/

Example:

 

In those files you need to dispatch the actual event so you can listen later. Steps:

  1. Add event dispatcher (core/event_dispatcher) to the list of dependencies.
  2. Add event dispatcher (eventDispatcher) to the definition function as function argument on the same position as you add it to dependencies.
  3. Dispatch the bootstrap loaded event:
  4. eventDispatcher.trigger('boostrap:loaded', Bootstrap);

 

Here is an example of all three changes:


Listening Bootstrap

When you have done upper steps, you can listen to it on any page you want with this code:

<script type="text/lazy-javascript" priority="1">
    require(['core/event_dispatcher'], function(eventDispatcher) {
        eventDispatcher.on('boostrap:loaded', function(Bootstrap) {
            console.log(Bootstrap);
        });
    });
</script>
1reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
reply to topic
Like2 Follow
  • 2 Likes
  • 2 yrs agoLast active
  • 1Replies
  • 304Views
  • 2 Following