First install this chrome plugin to better view knocout js of a website
https://chromewebstore.google.com/detail/knockout-context-hover/lcpnkclcbpmhekkjnkomhoecoiobbejf?hl=en
https://chromewebstore.google.com/detail/knockoutjs-context-debugg/plomponkmimcpdlpekioencoekefkjkn
Data Binding Syntax
Data binding is accomplished by adding an HTML attribute called data-bind to any
HTML element that you want Knockout to replace with information from your
ViewModel.
Knockout bindings using HTML comments
<!-- ko -->
<!-- /ko -->
Binding through HTML comments is extremely convenient when you want to wrap
your binding around a block of HTML code, o
<h1>Hello <span data-bind="text: name"></span></h1>
A span tag is data-bound to the name property of the ViewModel. This is done by
placing text: name inside the data-bind HTML attribute.
implementing Knockout requires
three distinct things. The first is the view, which in this example is the HTML that
contains the h1 and span tags that identify the data binding
The second is the ViewModel, which in this example is the JavaScript variable/funcâ€
tion called viewModel that contains a single variable name.
The third is telling Knockout to perform the data binding of the view and the Viewâ€
Model. This is accomplished by calling the ko.applyBindings function with a Viewâ€
Model.
<p>First String: < input data-bind = "value: firstString" /> </p>
This is how we are binding values from ViewModel to HTML elements using 'data-bind' attribute in the body section.
Here, 'firstString' refers to ViewModel variable.
this.firstString = ko.observable("Enter First String");
ko.observable is a concept which keeps an eye on the value changes so that it can update the underlying ViewModel data.
Using Chrome Console to Access Knockout ViewModel with RequireJS
require("knockout").dataFor($0);
https://calazanslucas.medium.com/knockoutjs-cheatsheet-for-magento-2-d4a8591acfb2
