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
"your_component_name":{
"name":"kinda redundunt eh",
"config":{
"component":"path/to/your/javascript",
"more-options"://can be anything you want
"template":"you will have this available in your js"
},
"children":{
//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

Writing Plugins for NodeBB

Starting with React JS

React-Leaflet v3: Creating a Mapping Application

What’s the deal with internationalization and why should you care about it?

How to package a JavaScript library for use in BigQuery

Understanding JavaScript Array Methods

Blog Post Class 8

Migrate MongoDB data to Cloud Firestore

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

Magento 2 : Does javascript bundling make any difference?

Laravel Best Practices You Should Follow

How to send email in PHP with example

How To Get Free HTTPS Fast