How to define knockout property as observable in Magento 2?

Magento uses knockout Javascript to enhance some of its native features. You must have to know about the Knockout observable feature to use it.

knockout observables are used to get track changes of the current view model property. if you want to subscribe to a change of your view model objects, you must define your property or objects as observable.

knockout observable in Magento defined by multiple ways in the javascript file.

1. Using knockout JS as dependency on the define() method of the JS file.

define(['uiComponent', 'ko'], function (Component, ko) {
    'use strict';

    return Component.extend({
        name: ko.observable("My Product name"),
        total: ko.observable(7),
        items: ko.observableArray([
            {name: "Product 1", price: 2},
            {name: "Product 2", price: 5}
        ])
    });
});

Here We have to define the name and total property as ko.observable() and if you have an array you can define the array as observable with ko.observableArray([])

---

2. Using uiComponent as dependency on define method with tracks property,

define(['uiComponent'], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            tracks: {
                name: true
                total: true
                items: true
            }
        },
    });
});

Using tracks property you can define property as observables.

---

3. Using uiComponent as dependency on define method with initObservable(),

define(['uiComponent'], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
                name: 'rakesh'
                total: 10
                items: [
		    {name: "Product 1", price: 2},
		    {name: "Product 2", price: 5}
		]
        },
        initObservable: function () {
            this._super().observe(['name', 'total', 'items']);
            return this;
        }
    });
});

Using initObservable() method from the parent element.js file, you can define property as observables.