Meet Maggie, M2 tutor by GPT-4

More info
Defeat Knockout.js in Magento 2 course image

Defeat Knockout.js in Magento 2

Learn all about Magento's implementation of Knockout.js including observables, reactivity, custom bindings, virtual elements, & saving JSON data.

65 lessons

4h 15m

View enrollment options

Programming a piece of complex user interface in Magento can be extremely difficult, because there are so many layers of information to understand. Once you have a solid foundation of Magento 2 backend programming fundamentals, and then learn the underlying concepts of UI Components, you can then dive a bit deeper into Knockout.js to render your templates more idiomatically with Magento best practices.

This course explores just about all of the Knockout.js concepts, and show you how to apply those concepts work with Magento 2. This includes learning about reactive variables, how to manage external state, multi-component setup & communication, creating custom data bindings & more.

Meet Mark, the course teacher

“Amazing work! I've found it hard as heck each time I had to deal with UI Components and KO in Magento 2. Huge, huge headache, but this course brought a lot of perspective to my understanding of these concepts.”  

Mihai Coman
Mihai Coman Mihai Coman
Magento Developer, Arnia Software

Course curriculum

Each video lesson can be played back & referenced as many times as you wish at slow or fast speed, tech-friendly closed captions, and includes full source code.

Includes Spanish translations provided by Google Translate

65 lessons

4h 15m

Getting started with Knockout.js development

What is Knockout.js?
Free preview
What is Knockout.js?
Build a Knockout.js component outside of Magento
Build a Knockout.js component outside of Magento
Set up a Magento development environment for JavaScript
Set up a Magento development environment for JavaScript
Requires for the Inventory Fulfillment module
Free preview
Requires for the Inventory Fulfillment module
How Magento initializes & bootstraps Knockout.js
Free preview
How Magento initializes & bootstraps Knockout.js
Create a Magento module skeleton, route, and controller
Create a Magento module skeleton, route, and controller
Create a Magento layout block and display it on a page
Create a Magento layout block and display it on a page
Create a Magento UI Component to instantiate a Knockout.js view model
Create a Magento UI Component to instantiate a Knockout.js view model
Debug UI components & Knockout.js view models in Google Chrome
Debug UI components & Knockout.js view models in Google Chrome

Knockout.js view models & views

Why link a UI Component to a Knockout.js view model in Magento?
Why link a UI Component to a Knockout.js view model in Magento?
Execute code upon loading a Knockout.js ViewModel
Execute code upon loading a Knockout.js ViewModel
What is a Knockout.js virtual element?
What is a Knockout.js virtual element?
Display a Knockout.js template from a UI Component
Free preview
Display a Knockout.js template from a UI Component

Knockout.js data binding & event handlers

Bind & display text within a Knockout.js rendered template
Bind & display text within a Knockout.js rendered template
Create a reactive, observable variable in Knockout.js
Free preview
Create a reactive, observable variable in Knockout.js
When to use or avoid Knockout.js observables
When to use or avoid Knockout.js observables
Create a form submission in Knockout.js with a click handler
Create a form submission in Knockout.js with a click handler
Create a form submission in Knockout.js with a submit handler
Create a form submission in Knockout.js with a submit handler
Call the Magento API to get product data for a SKU
Call the Magento API to get product data for a SKU
Create a basic Ajax request for a Knockout.js template
Free preview
Create a basic Ajax request for a Knockout.js template
Handle Ajax success & error responses in Knockout.js
Handle Ajax success & error responses in Knockout.js

Knockout.js rendering & views

Use a Knockout.js style data binding attribute for reactive inline styling
Use a Knockout.js style data binding attribute for reactive inline styling
Add a loading spinner to Ajax requests in Knockout.js
Add a loading spinner to Ajax requests in Knockout.js
Translate text in Magento Knockout.js JavaScript files
Translate text in Magento Knockout.js JavaScript files
Translate text in Magento Knockout.js template files
Translate text in Magento Knockout.js template files
Guidelines for using jQuery & KnockoutJS together
Guidelines for using jQuery & KnockoutJS together
Create multiple Knockout.js templates to organize complex views
Create multiple Knockout.js templates to organize complex views

Knockout.js observable arrays & context

Create a Knockout.js observable array
Create a Knockout.js observable array
Render a Knockout.js observable array with foreach
Render a Knockout.js observable array with foreach
Get the index of a Knockout.js observable array item
Get the index of a Knockout.js observable array item
Render a Knockout.js observable array with a virtual element
Render a Knockout.js observable array with a virtual element
Build and render multi-dimensional observable arrays in Knockout.js
Build and render multi-dimensional observable arrays in Knockout.js
Get & specify the context of a Knockout.js observable array item
Get & specify the context of a Knockout.js observable array item
Understand $root & $parent in Magento's Knockout.js implementation
Understand $root & $parent in Magento's Knockout.js implementation
Build a complex observable array in Knockout.js
Build a complex observable array in Knockout.js
Bind input fields to complex observableArrays in Knockout.js
Bind input fields to complex observableArrays in Knockout.js
Create a Knockout.js click event handler
Create a Knockout.js click event handler
Bind context to a Knockout.js click handler
Bind context to a Knockout.js click handler
Create a Knockout.js submit event handler
Create a Knockout.js submit event handler

Styling Knockout.js with CSS

Style a Knockout.js template
Style a Knockout.js template
Style Knockout.js templates with Magento CSS variables
Style Knockout.js templates with Magento CSS variables

More advanced Knockout.js concepts

Understand local & external JavaScript state management in Magento
Understand local & external JavaScript state management in Magento
Share data between multiple Knockout.js templates with external state
Share data between multiple Knockout.js templates with external state
Refactor Knockout.js view model handlers into model actions
Refactor Knockout.js view model handlers into model actions
Subscribe to changes of Knockout.js observable values
Subscribe to changes of Knockout.js observable values
Create a Knockout.js computed function
Create a Knockout.js computed function
Exercise: Create a Knockout.js computed function
Exercise: Create a Knockout.js computed function
Write a custom Knockout.js extender to validate & enforce data integrity
Write a custom Knockout.js extender to validate & enforce data integrity
Optimize computed functions with pureComputed
Optimize computed functions with pureComputed
Client-side Ajax form validation with jQuery
Client-side Ajax form validation with jQuery
Persist Ajax form validation with Knockout.js observables
Persist Ajax form validation with Knockout.js observables
Create dynamic attributes with Knockout.js
Create dynamic attributes with Knockout.js
Challenge: Create a UI Component, Knockout.js template and model
Challenge: Create a UI Component, Knockout.js template and model
Challenge Review: Create a UI Component, Knockout.js template and model
Challenge Review: Create a UI Component, Knockout.js template and model
Using reduce within a Knockout.js computed function
Using reduce within a Knockout.js computed function
Refactoring a Knockout.js computed function to an external model
Refactoring a Knockout.js computed function to an external model
Exercise: Using reduce within a Knockout.js computed function
Exercise: Using reduce within a Knockout.js computed function
Control visibility & disable elements with KnockoutJS
Control visibility & disable elements with KnockoutJS
Nesting issues using the Knockout.js containerless control flow syntax
Nesting issues using the Knockout.js containerless control flow syntax

Working with data in Knockout.js

Overview of Knockout.js custom data binding handlers
Overview of Knockout.js custom data binding handlers
Challenge: Build your own Knockout.js custom data binding
Challenge: Build your own Knockout.js custom data binding
Get familiar with Knockout.js utilities
Get familiar with Knockout.js utilities
Save JSON data with Knockout.js and a standard form post
Save JSON data with Knockout.js and a standard form post
Save JSON data with Knockout.js and an Ajax form post
Save JSON data with Knockout.js and an Ajax form post
Create a controller action to handle a form post submission
Create a controller action to handle a form post submission

Enroll in the course

Start learning M2 today

Choose the best option for you & your team.

This course All courses
Team
$ 747
one-time payment for your team
 

  • Train up to 5 on your team

  • Lifetime access to this course

  • Free updates for life

  • Full source code

Enroll your team
Individual
$ 249
one payment for lifetime access
 

  • License for a single user

  • Lifetime access to this course

  • Free updates for life

  • Full source code

Enroll in this course

“I went through many different Magento courses, but hands down, M.academy is the best. Short, precise, straight & to the point, and very well explained. I just wanted to personally thank you for all of the quality courses you are providing. Keep up the great work!”  

Frequently asked questions

Who is this course meant for?
This course was designed to be consumed by developers with a working knowledge of Magento 2, who want to improve their frontend programming skills. Knockout.js is a view rendering engine built with JavaScript, and adds reactivity to frontend templates.
What do I need to know to take this course?
Those new to Magento should first becoming familiar with Magento core development and JavaScript fundamentals before taking this course. Knowledge of UI Components is not required but is be extremely helpful, as UI Components are used to integrate Knockout.js into Magento 2.
Do I need a development environment setup?
Yes, this course assumes you have a running development environment of Magento setup and running locally. If you don't already have a development environment setup, please set one up before enrolling in the course. M.academy has a free course, Set Up a Magento 2 Development Environment with Docker.
What version of Magento is this based on?
This course was created using concepts featured in Magento version 2.4. If a new best-practice approach is introduced in a future version of Magento 2, the course will be updated appropriately.