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

To look at ui components from pure frontend perspective, following json is where it ALL begins.

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



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