JSFiddle - React, Tailwind, and code Playground

by dzul1983

HTML

<!-- Initial data for the people observableArray -->
<div data-bind="useInitValueFor: people">
    <p><span data-bind="text: firstName">John</span> <span data-bind="text: lastName">Doe</span></p>
    <p><span data-bind="text: firstName">Jane</span> <span data-bind="text: lastName">Doe</span></p>
    <p><span data-bind="text: firstName">Frank</span> <span data-bind="text: lastName">Doe</span></p>
</div>
<!-- ko foreach: people -->
<p><span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span></p>
<!-- /ko -->

<!-- ko with: product, useInitValueFor: product -->
<input type="text" data-bind="value: name" value="Bicycle" />
<input type="text" data-bind="value: brand" value="BMX" />
<!-- /ko -->

<p data-bind="text: ko.toJSON($data)"></p>

JavaScript

ko.virtualElements.allowedBindings.useInitValueFor = true;
ko.bindingHandlers.useInitValueFor = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var bindingProvider = ko.bindingProvider['instance'];
        var children = allBindingsAccessor().with !== undefined ? ko.utils.domData.get(element, "__ko_anon_template__").da.getElementsByTagName('*') : element.getElementsByTagName('*');
        var foreachArray = [];

        function applyValue(viewModel, propName, value) {
            if (ko.isObservable(viewModel[propName])) {
                if (!(viewModel[propName].destroyAll === undefined)) {
                    viewModel[propName]().push(value);
                } else {
                    viewModel[propName](value);
                }
            } else {
                viewModel[propName] = value;
            }
        }

        function isEmpty(map) {
            for (var key in map) {
                if (map.hasOwnProperty(key)) {
                    return false;
                }
                return true;
            }
        }

        for (var i = 0; i < children.length; i++) {
            var c = children[i];
            var c_children = c.getElementsByTagName('*');
            var foreachArrayObj = {};
            for (var j = 0; j < c_children.length; j++) {
                var child = c_children[j];
                var bindingString = bindingProvider.getBindingsString(child);
                if (!bindingString || bindingString.length === 0) {
                    continue;
                }
                var bindPropObj = ko.jsonExpressionRewriting.parseObjectLiteral(bindingString.replace(/\s+/g, ''));
                console.log(bindPropObj);
                if (!bindPropObj || bindPropObj.length == 0) {
                    continue;
                }

                var val;
                var bindType = bindPropObj[0].key;
                switch (bindType) { // TODO: add other type...