JSFiddle - React, Tailwind, and code Playground

by fourFath3r

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<html>
    <body>
        Primary Value <input type="text" data-bind="value: testObservable" \>
        <br />
        Clone of Primary Value <input id="testWrite" type="text" \>
        <br />
        Clone of Primary Value <input type="text" data-bind="value: testObservable" \>
        <br />
        Dependent on Primary Value <input type="text" data-bind="value: testDependent" \>
        <br />
        Subscribed to Primary Value <input type="text" data-bind="value: testSubscription" \>
    </body>
</html>

JavaScript

$(document).ready(function () {
    var testValue = ko.observable(0);
    var viewModel = {};
    viewModel.testObservable = ko.dependentObservable({
        read: testValue,
        write: function (value) {
            testValue(value);
            document.getElementById('testWrite').value = value;
        },
        owner: viewModel
    });
    viewModel.testDependent = ko.dependentObservable(function() {
        return this.testObservable();
    }, viewModel);
    
    viewModel.testSubscription = ko.observable(testValue());
    viewModel.testObservable.subscribe(viewModel.testSubscription);
    
    ko.applyBindings(viewModel);
});