JSFiddle - React, Tailwind, and code Playground

by imoqaddem

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<p>First value:
    <input value="qsdqsd" data-bind="valueWithInit: 'firstValue'" />
</p>
<!-- two-way binding -->
<p>Second value:
    <input data-bind="value: secondValue" />
</p>
<!-- one-way binding -->
<p>Third value:
    <input data-bind="value: secondValue.length" />
</p>
<!-- no binding -->

JavaScript

ko.bindingHandlers.valueWithInit = {
    init: function (element, valueAccessor, allBindingsAccessor, data) {
        var property = valueAccessor(),
            value = element.value;

        //create the observable, if it doesn't exist 
        if (!ko.isWriteableObservable(data[property])) {
            data[property] = ko.observable();
        }

        data[property](value);

        ko.applyBindingsToNode(element, {
            value: data[property]
        });
    }
};

var viewModel = {
    secondValue: "hello, again" // Not observable
};

ko.applyBindings(viewModel);

viewModel.firstValue('imad');