Defeat Knockout.js in Magento 2
Getting Started with Knockout.js Development
-
What is Knockout.js?Preview
-
Build a Knockout.js component outside of MagentoPreview
-
Set up Magento environment for JavaScript developmentPreview
-
Requirements for the Inventory Fulfillment modulePreview
-
How Magento initializes & bootstraps Knockout.jsPreview
-
Create a Magento module skeleton, route, and controllerPreview
-
Create a Magento layout block and display it on a pagePreview
-
Create a Magento UI Component to instantiate a Knockout.js view modelPreview
-
Debug UI components & Knockout.js view models in Google ChromePreview
Knockout.js ViewModels & Views
Knockout.js Data Binding & Event Handlers
-
Bind & display text within a Knockout.js rendered templateLocked(4:20)
-
UI Component fallback hierarchyLocked(2:41)
-
Create a reactive, observable variable in Knockout.jsLocked(3:04)
-
When to use or avoid Knockout.js observablesLocked(3:15)
-
Create a form submission in Knockout.js with a click handlerLocked(2:10)
-
Create a form submission in Knockout.js with a submit handlerLocked(1:40)
-
Call the Magento API to get product data for a SKULocked(2:23)
-
Create a basic Ajax request for a Knockout.js templateLocked(3:59)
-
Handle Ajax success & error responses in Knockout.jsLocked(4:06)
Knockout.js Rendering & Views
-
Use a Knockout.js style data binding attribute for reactive inline stylingLocked(3:53)
-
Add a loading spinner to Ajax requests in Knockout.jsLocked(3:28)
-
Translate text in Magento Knockout.js JavaScript filesLocked(5:20)
-
Translate text in Magento Knockout.js template filesLocked(5:59)
-
Guidelines for using jQuery & KnockoutJS togetherLocked
-
Create multiple Knockout.js templates to organize complex viewsLocked(5:40)
Knockout.js Observable Arrays & Context
-
Create a Knockout.js observable arrayLocked(2:08)
-
Render a Knockout.js observable array with foreachLocked(3:09)
-
Get the index of a Knockout.js observable array itemLocked(2:23)
-
Render a Knockout.js observable array with a virtual elementLocked(2:54)
-
Build and render multi-dimensional observable arrays in Knockout.jsLocked(2:28)
-
Get & specify the context of a Knockout.js observable array itemLocked(4:18)
-
Understand $root & $parent in Magento's Knockout.js implementationLocked(4:49)
-
Build a complex observable array in Knockout.jsLocked(2:08)
-
Bind input fields to complex observableArrays in Knockout.jsLocked(5:42)
-
Create a Knockout.js click event handlerLocked(3:03)
-
Bind context to a Knockout.js click handlerLocked(6:15)
-
Create a Knockout.js submit event handlerLocked(2:11)
Styling Knockout.js with CSS
Advanced Knockout.js Concepts
-
Understand local & external JavaScript state management in MagentoLocked
-
Share data between multiple Knockout.js templates with external stateLocked(4:21)
-
Refactor Knockout.js view model handlers into model actionsLocked(4:42)
-
Subscribe to changes of Knockout.js observable valuesLocked(3:24)
-
Create a Knockout.js computed functionLocked(7:27)
-
Exercise: Create a Knockout.js computed functionLocked
-
Write a custom Knockout.js extender to validate & enforce data integrityLocked(8:58)
-
Optimize computed functions with pureComputedLocked(2:36)
-
Client-side Ajax form validation with jQueryLocked(8:02)
-
Persist Ajax form validation with Knockout.js observablesLocked(2:03)
-
Create dynamic attributes with Knockout.jsLocked(4:33)
-
Challenge! 🚀 Create a UI Component, Knockout.js template and modelLocked
-
Challenge Review: Create a UI Component, Knockout.js template and modelLocked(14:17)
-
Using reduce within a Knockout.js computed functionLocked(5:53)
-
Refactoring a Knockout.js computed function to an external modelLocked(2:27)
-
Exercise: Using reduce within a Knockout.js computed functionLocked
-
Control visibility & disable elements with KnockoutJSLocked(7:32)
-
Nesting issues using the KnockoutJS containerless control flow syntaxLocked(2:25)
Working with Data in Knockout.js
-
Overview of Knockout.js custom data binding handlersLocked(3:16)
-
Challenge! 🚀 Build your own Knockout.js custom data bindingLocked
-
Get familiar with Knockout.js utilitiesLocked(1:36)
-
Save JSON data with Knockout.js and a standard form postLocked(7:03)
-
Save JSON data with Knockout.js and an Ajax form postLocked(4:18)
-
Create a controller action to handle a form post submissionLocked(3:43)
Next steps for Knockout.js in Magento 2
If you're already enrolled, log in to access this lesson.
Enroll in Course to Unlock