Autoplay
Autocomplete
Previous lesson
Complete and Continue
Defeat Knockout.js in Magento 2
Getting Started with Knockout.js Development
What is Knockout.js?
Preview
Build a Knockout.js component outside of Magento
Preview
Set up Magento environment for JavaScript development
Preview
Requirements for the Inventory Fulfillment module
Preview
How Magento initializes & bootstraps Knockout.js
Preview
Create a Magento module skeleton, route, and controller
Preview
Create a Magento layout block and display it on a page
Preview
Create a Magento UI Component to instantiate a Knockout.js view model
Preview
Debug UI components & Knockout.js view models in Google Chrome
Preview
Knockout.js ViewModels & Views
Why link a UI Component to a Knockout.js view model in Magento?
Locked
(4:06)
Execute code upon loading a Knockout.js ViewModel
Locked
(2:07)
What is a Knockout.js virtual element?
Locked
(4:21)
Display a Knockout.js template from a UI Component
Locked
(4:49)
Knockout.js Data Binding & Event Handlers
Bind & display text within a Knockout.js rendered template
Locked
(4:20)
UI Component fallback hierarchy
Locked
(2:41)
Create a reactive, observable variable in Knockout.js
Locked
(3:04)
When to use or avoid Knockout.js observables
Locked
(3:15)
Create a form submission in Knockout.js with a click handler
Locked
(2:10)
Create a form submission in Knockout.js with a submit handler
Locked
(1:40)
Call the Magento API to get product data for a SKU
Locked
(2:23)
Create a basic Ajax request for a Knockout.js template
Locked
(3:59)
Handle Ajax success & error responses in Knockout.js
Locked
(4:06)
Knockout.js Rendering & Views
Use a Knockout.js style data binding attribute for reactive inline styling
Locked
(3:53)
Add a loading spinner to Ajax requests in Knockout.js
Locked
(3:28)
Translate text in Magento Knockout.js JavaScript files
Locked
(5:20)
Translate text in Magento Knockout.js template files
Locked
(5:59)
Guidelines for using jQuery & KnockoutJS together
Locked
Create multiple Knockout.js templates to organize complex views
Locked
(5:40)
Knockout.js Observable Arrays & Context
Create a Knockout.js observable array
Locked
(2:08)
Render a Knockout.js observable array with foreach
Locked
(3:09)
Get the index of a Knockout.js observable array item
Locked
(2:23)
Render a Knockout.js observable array with a virtual element
Locked
(2:54)
Build and render multi-dimensional observable arrays in Knockout.js
Locked
(2:28)
Get & specify the context of a Knockout.js observable array item
Locked
(4:18)
Understand $root & $parent in Magento's Knockout.js implementation
Locked
(4:49)
Build a complex observable array in Knockout.js
Locked
(2:08)
Bind input fields to complex observableArrays in Knockout.js
Locked
(5:42)
Create a Knockout.js click event handler
Locked
(3:03)
Bind context to a Knockout.js click handler
Locked
(6:15)
Create a Knockout.js submit event handler
Locked
(2:11)
Styling Knockout.js with CSS
Style a Knockout.js template with CSS
Locked
(6:21)
Style a Knockout.js template with Magento CSS variables
Locked
(3:12)
Advanced Knockout.js Concepts
Understand local & external JavaScript state management in Magento
Locked
Share data between multiple Knockout.js templates with external state
Locked
(4:21)
Refactor Knockout.js view model handlers into model actions
Locked
(4:42)
Subscribe to changes of Knockout.js observable values
Locked
(3:24)
Create a Knockout.js computed function
Locked
(7:27)
Exercise: Create a Knockout.js computed function
Locked
Write a custom Knockout.js extender to validate & enforce data integrity
Locked
(8:58)
Optimize computed functions with pureComputed
Locked
(2:36)
Client-side Ajax form validation with jQuery
Locked
(8:02)
Persist Ajax form validation with Knockout.js observables
Locked
(2:03)
Create dynamic attributes with Knockout.js
Locked
(4:33)
Challenge! 🚀 Create a UI Component, Knockout.js template and model
Locked
Challenge Review: Create a UI Component, Knockout.js template and model
Locked
(14:17)
Using reduce within a Knockout.js computed function
Locked
(5:53)
Refactoring a Knockout.js computed function to an external model
Locked
(2:27)
Exercise: Using reduce within a Knockout.js computed function
Locked
Control visibility & disable elements with KnockoutJS
Locked
(7:32)
Nesting issues using the KnockoutJS containerless control flow syntax
Locked
(2:25)
Working with Data in Knockout.js
Overview of Knockout.js custom data binding handlers
Locked
(3:16)
Challenge! 🚀 Build your own Knockout.js custom data binding
Locked
Get familiar with Knockout.js utilities
Locked
(1:36)
Save JSON data with Knockout.js and a standard form post
Locked
(7:03)
Save JSON data with Knockout.js and an Ajax form post
Locked
(4:18)
Create a controller action to handle a form post submission
Locked
(3:43)
Conclusion
Downloadable archive of the InventoryFulfillment module
Locked
Next steps for Knockout.js in Magento 2
Locked
Course feedback & certificate for the Defeat Knockout.js in M2 course
Locked
Save JSON data with Knockout.js and an Ajax form post
Lesson content locked
If you're already enrolled,
log in to access this lesson
.
Enroll in Course to Unlock