KnockoutJs and Magento 2 uiComponent

  • What does uiRegistry do? (stores all your UI components)
  • Objects returned by requirejs are singletons
  • uiComponent javascript module return a constructor
  • Magento’s custom knockout scope binding.
  • uiComponent module understands children node
  • how to create your own observable without directly using knockout
  • Difference between uiComponent and uiElement
  • setting up communication between two components by using data provider

Product listing Component

magento x-init json from product listing
product_listing component node
Magento_Ui requirejs config
  1. Most ui components extend either ‘uiComponent’ or ‘uiCollection’. There isn’t any difference between these two components because they point to the same file. Two separate aliases for a single file could be because of legacy reasons or some internal reason on Magento2 team. Point is, most uiComponents like listing and filters and form components extend from uiComponents.
  2. Your data source will generally extend uiElement class. It will collaborate with other “model” objects to fetch data or filter data.
product_listing with two children
"name":"kinda redundunt eh",
"more-options"://can be anything you want
"template":"you will have this available in your js"
//if you have your template for parent
// then you are responsible for rendering
// children the way you want




just a bug hunter and problem addict

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How Ushahidi Turned TenFour Mobile App Into Progressive Web App (PWA)

How “this” binds in regular functions and arrow functions in JavaScript

Making ng2-charts work for us


How to configure Keycloak for a Web App

React Native #31: Firebase Notification (react-native-firebase Version 7)

Mock Server

Using Leaflet.js in a React project: Build a Mapping Application

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Jakhotiya

Abhishek Jakhotiya

just a bug hunter and problem addict

More from Medium

The woes of traceroute

Conceptual Overview of HTML

Make a contract!

I was thinking… about passwords. xD