JSFiddle - React, Tailwind, and code Playground

by dzul1983

HTML

<div data-bind="foreach: people, useInitValueFor: ['firstName', 'lastName', 'merke']">
    <div>
        <div data-bind="text: firstName">John</div>
        <div data-bind="text: lastName">Doe</div>
    </div>
    <div data-bind="useInitValueFor: ['firstName', 'lastName', 'merke']">
        <div data-bind="text: firstName">Ralf</div>
        <div data-bind="text: lastName">Lauren</div>
    </div>
</div>
<div data-bind="useInitValueFor: ['animalName']">
    <input type="text" data-bind="value: animalName" value="Paul"/>
</div>
<p data-bind="text: ko.toJSON(people)"></p>
<p data-bind="text: ko.toJSON(animalName)"></p>

JavaScript

ko.bindingHandlers.useInitValueFor = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var bindingProvider = ko.bindingProvider['instance'];
        var value = ko.utils.unwrapObservable(valueAccessor());
        console.log(allBindingsAccessor());
        var _viewModel = allBindingsAccessor().with !== undefined ? allBindingsAccessor().with : viewModel;
        var children = allBindingsAccessor().with !== undefined ? ko.utils.domData.get(element, "__ko_anon_template__").da.getElementsByTagName('*') : element.getElementsByTagName('*');
        var childrenWithBinding;

        for (var b = 0; b < children.length; b++) {
            var child = children[b];
            var bindingString = bindingProvider.getBindingsString(child);
            if (!bindingString || bindingString.length === 0) {
                continue;
            }
            var bindPropObj = ko.jsonExpressionRewriting.parseObjectLiteral(bindingString.replace(/\s+/g, ''));
            if (bindPropObj.length) {
                for (var c = 0; c < bindPropObj.length; c++) {
                    var bindName = bindPropObj[c].value;
                    var bindType = bindPropObj[c].key;

                    if (value.indexOf(bindName) !== -1) {
                        if (typeof childrenWithBinding === 'undefined') {
                            childrenWithBinding = {};
                        }

                        if (typeof childrenWithBinding[bindName] === 'string' || typeof childrenWithBinding[bindName] === 'undefined') {
                            childrenWithBinding[bindName] = [];
                        }

                        childrenWithBinding[bindName].push({
                            bindType: bindType,
                            element: child
                        });
                    }
                }
            }
        }

        if (typeof childrenWithBinding !== 'undefined') {
            function...