Autoplay
Autocomplete
Previous lesson
Complete and Continue
Defeat Knockout.js in Magento 2
Getting Started with Knockout.js Development
What is Knockout.js?
Preview
(7:16)
Build a Knockout.js component outside of Magento
Preview
(5:25)
Set up Magento environment for JavaScript development
Preview
(3:40)
Requirements for the Inventory Fulfillment module
Preview
(4:51)
How Magento initializes & bootstraps Knockout.js
Preview
(3:58)
Create a Magento module skeleton, route, and controller
Preview
(4:02)
Create a Magento layout block and display it on a page
Preview
(2:46)
Create a Magento UI Component to instantiate a Knockout.js view model
Preview
(8:53)
Debug UI components & Knockout.js view models in Google Chrome
Preview
(4:54)
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
Build a complex observable array in Knockout.js
Lesson content locked
If you're already enrolled,
log in to access this lesson
.
Enroll in Course to Unlock