Log in

Courses

Defeat Knockout.js in Magento 2 artwork

Defeat Knockout.js in Magento 2

Learn all about KO.js in M2 including observables, reactivity, custom bindings, virtual elements & JSON.

Last updated 2 weeks ago

This is a premium course

Only available to enrolled or University students.
Join today to unlock all lessons in this course.

Enroll now

There are 68 lessons in this course:

Getting started with Knockout.js development

Understand Knockout.js in Magento
7:13

Understand Knockout.js

Build a Knockout.js component outside of Magento
5:22

Build a Knockout.js component outside of Magento

Set up a Magento environment for JavaScript development
3:37

Set up a Magento environment for JavaScript development

Define requirements for the Inventory Fulfillment module in Magento
4:48

Define requirements for the Inventory Fulfillment module

Understand how Magento initializes and bootstraps Knockout.js
3:56

Understand how Magento initializes and bootstraps Knockout.js

Create a Magento module skeleton, route, and controller
3:59

Create a Magento module skeleton, route, and controller 4

Create a Magento layout block and display it on a page
2:43

Create a Magento layout block and display it on a page 2

Create a Magento UI component to instantiate a Knockout.js view model
8:51

Create a Magento UI component to instantiate a Knockout.js view model

Debug UI components and Knockout.js view models in Google Chrome
4:51

Debug UI components and Knockout.js view models in Google Chrome 6

Knockout.js ViewModels & views

Understand why to link a UI component to a Knockout.js view model in Magento
4:04

Understand why to link a UI component to a Knockout.js view model 4

Execute code when loading a Knockout.js view model in Magento
2:05

Execute code when loading a Knockout.js view model 4

Understand Knockout.js virtual elements in Magento
4:19

Understand Knockout.js virtual elements

Display a Knockout.js template from a UI component in Magento
4:46

Display a Knockout.js template from a UI component 6

Knockout.js data binding & event handlers

Bind and display text within a Knockout.js template in Magento
4:17

Bind and display text within a Knockout.js template 2

Understand the UI component fallback hierarchy in Magento
2:41

Understand the UI component fallback hierarchy

Create a reactive observable variable in Knockout.js for Magento
3:02

Create a reactive observable variable in Knockout.js for Magento

Know when to use or avoid Knockout.js observables in Magento
3:13

Know when to use or avoid Knockout.js observables 5

Create a Knockout.js form submission with a click handler in Magento
2:08

Create a Knockout.js form submission with a click handler

Create a Knockout.js form submission with a submit handler in Magento
1:37

Create a Knockout.js form submission with a submit handler

Call the Magento API to get product data for a SKU
2:21

Call the Magento API to get product data for a SKU 4

Create a basic Ajax request for a Knockout.js template in Magento
3:57

Create a basic Ajax request for a Knockout.js template 2

Handle Ajax success and error responses in Knockout.js in Magento
4:04

Handle Ajax success and error responses in Knockout.js 2

Knockout.js rendering & views

Use a Knockout.js data binding attribute for reactive inline styling in Magento
3:51

Use a Knockout.js data binding attribute for reactive inline styling 5

Add a loading spinner to Ajax requests in Knockout.js in Magento
3:25

Add a loading spinner to Ajax requests in Knockout.js 2

Translate text in Magento Knockout.js JavaScript files
5:17

Translate text in Magento Knockout.js JavaScript files

Translate text in Magento Knockout.js template files
5:57

Translate text in Magento Knockout.js template files 2

Follow guidelines for using jQuery and Knockout.js together 7

Create multiple Knockout.js templates to organize complex views in Magento
5:38

Create multiple Knockout.js templates to organize complex views

Knockout.js observable arrays & context

Create a Knockout.js observable array in Magento
2:05

Create a Knockout.js observable array

Render a Knockout.js observable array with foreach in Magento
3:07

Render a Knockout.js observable array with foreach

Get the index of a Knockout.js observable array item
2:21

Get the index of a Knockout.js observable array item

Render a Knockout.js observable array with a virtual element in Magento
2:52

Render a Knockout.js observable array with a virtual element 2

Build and render multidimensional observable arrays in Knockout.js
2:25

Build and render multidimensional observable arrays in Knockout.js

Get and specify the context of a Knockout.js observable array item
4:15

Get and specify the context of a Knockout.js observable array item

Understand $root and $parent in Magento's Knockout.js implementation
4:47

Understand $root and $parent in Magento's Knockout.js implementation

Build a complex observable array in Knockout.js
2:06

Build a complex observable array in Knockout.js 2

Bind input fields to complex observable arrays in Knockout.js
5:40

Bind input fields to complex observable arrays in Knockout.js 2

Create a Knockout.js click event handler in Magento
3:01

Refreshed Create a Knockout.js click event handler 2

Bind context to a Knockout.js click handler in Magento
6:12

Bind context to a Knockout.js click handler

Create a Knockout.js submit event handler in Magento
2:08

Create a Knockout.js submit event handler

Styling Knockout.js with CSS

Style a Knockout.js template with CSS in Magento
6:19

Style a Knockout.js template with CSS

Style a Knockout.js template with Magento CSS variables
3:10

Style a Knockout.js template with Magento CSS variables

Advanced Knockout.js concepts

Understand local and external JavaScript state management 3

Share data between multiple Knockout.js templates with external state in Magento
4:19

Share data between multiple Knockout.js templates with external state 4

Refactor Knockout.js view model handlers into model actions in Magento
4:40

Refactor Knockout.js view model handlers into model actions

Subscribe to changes in Knockout.js observable values in Magento
3:21

Subscribe to changes in Knockout.js observable values 2

Create a Knockout.js computed function in Magento
7:25

Create a Knockout.js computed function 2

Exercise: Create a Knockout.js computed function 2

Write a custom Knockout.js extender to validate and enforce data integrity in Magento
8:55

Write a custom Knockout.js extender to validate and enforce data integrity 2

Optimize computed functions with pureComputed in Magento
2:34

Optimize computed functions with pureComputed 1

Validate Ajax forms client-side with jQuery in Magento
8:00

Validate Ajax forms client-side with jQuery 8

Persist Ajax form validation with Knockout.js observables in Magento
2:01

Persist Ajax form validation with Knockout.js observables

Create dynamic attributes with Knockout.js in Magento
4:31

Create dynamic attributes with Knockout.js

Create a UI component, Knockout.js template, and model

Review creating a UI component, Knockout.js template, and model in Magento
14:15

Review creating a UI component, Knockout.js template, and model 7

Use reduce within a Knockout.js computed function in Magento
5:50

Use reduce within a Knockout.js computed function

Refactor a Knockout.js computed function to an external model in Magento
2:25

Refactor a Knockout.js computed function to an external model

Exercise: Use reduce within a Knockout.js computed function

Control element visibility and disable elements with Knockout.js in Magento
7:30

Control element visibility and disable elements with Knockout.js

Resolve nesting issues with Knockout.js containerless control flow syntax in Magento
2:22

Resolve nesting issues with Knockout.js containerless control flow syntax 4

Working with data in Knockout.js

Understand Knockout.js custom data binding handlers in Magento
3:14

Understand Knockout.js custom data binding handlers

Build a custom Knockout.js data binding 2

Use Knockout.js utilities in Magento
1:33

Use Knockout.js utilities 2

Save JSON data with Knockout.js and a standard form post in Magento
7:01

Save JSON data with Knockout.js and a standard form post 2

Save JSON data with Knockout.js and an Ajax form post in Magento
4:16

Save JSON data with Knockout.js and an Ajax form post

Create a controller action to handle a form post submission in Magento
3:40

Create a controller action to handle a form post submission 4

Conclusion

Downloadable archive of the InventoryFulfillment module

Explore the next steps for Knockout.js