How Magento initializes & bootstraps Knockout.js

Let’s now explore how Magento initializes and bootstraps Knockout.js, which is different from the standard initialization process. Magento bootstraps Knockout.js within the Magento UI module, so we will start by looking at the module-ui folder within the vendor folder.

Magento UI Module Structure

Navigate to the following path:

view/base/web/js/lib/knockout/bootstrap.js

From the comments, we can see that it loads all available Knockout bindings, sets a custom template engine, and initializes Knockout. Scrolling down the code, it sets a “uid”, a custom template engine, and then calls ko.applyBindings(). The main purpose of this template engine is to make Knockout look for components on the page using Magento template syntax. This makes it possible to look up Knockout templates based on a special string syntax.

Locating the Knockout Library

Next, let’s find where “ko” comes from, which is the Knockout library. We see a “ko” alias here, but where is this actually defined? Navigate to the Magento Theme module, which is at vendor/module-theme, and then go to view/base/requirejs-config. If we look through this file, we can see an alias set at the top for “ko”, and this maps to knockoutjs/knockout.

During the fallback process of looking for RequireJS dependencies, it will fall all the way back to the lib/web folder. So if we go back to the root of our Magento install, and then go to lib/web/knockoutjs/knockout.js, this is the actual version of Knockout that is used in Magento. And this is how we can also tell that it’s using version 3.4.2.

Examining the Bootstrap.js File

Returning to the bootstrap.js file, note how there are a few files imported here, but they’re not referenced in the function callback. This is how Magento and RequireJS handle other initialization processes. You can include it, and not reference it in the callback, but the code is still loaded and executed.

Let’s look at the bindings/bootstrap file. If we scroll down in this file, we can see that an object is returned that defines all of these custom Knockout data bindings. All these do is require a specific file and return it in an object property. If we look at a specific example here, for example “fadeVisible”, we can see that each of these files calls ko.bindingHandlers, and then sets a new property on that object. And this is where the custom data binding is coded up.

Custom Data Bindings

You will learn more about these custom data bindings later in the course, but just know that this file is loaded and returned as an object property. And that’s how these data bindings get initialized.

Using Knockout in Magento

Now that we know how the entire Knockout.js process is initialized in Magento, we can just call the “ko” alias within our own “require” or “define” functions to use the Knockout library.

In this lesson, we will create a new Magento module, set up a route, and define a controller.

Creating the Module Files

1. First, navigate to the app/code folder and create a new file at Macademy/InventoryFulfillment/registration.php.
2. Next, create the module definition file at etc/module.xml and populate it with the necessary code.

Setting Up the Route

1. Now, set up a new route under etc/frontend/routes.xml and define a new routes file. This will use the “standard” router, and the frontName for our route will be inventory-fulfillment.

Creating the Controller

1. To define a new controller when we land on the /inventory-fulfillment route, create a new file under our module route named Controller/Index/Index.php.
2. Bootstrap the file with code for a standard controller. This will create a new class that implements the HttpGetActionInterface, create a pageFactory object, and return an instance of that factory as a Page object.
3. Modify the execute method by hoisting the pageFactory->create() into its own $page variable and return this instance.
4. Set a custom title for this page by calling $page->getConfig()->getTitle(), and then >set(). Pass the title through the translation function to make it translatable. The title of this page will be “Shipping Plan”.

Enabling the Module

Enable the module with bin/magento module:enable Macademy_InventoryFulfillment, which is the name of our module.

Register the module with Magento by executing bin/magento setup:upgrade. This clears any caches and generated code to ensure our module is fully enabled.

Testing the Route

After executing the previous steps, visit the store and go to the route at /inventory-fulfillment. You should see a successful response, with the name of our page, “Shipping Plan”, appearing in the page title and the meta title. This confirms that everything has been successfully set up with our module.