JSFiddle - React, Tailwind, and code Playground

by dzul1983

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<div data-bind="with: person, useInitValueFor: ['firstName', 'lastName']">
    <div data-bind="text: firstName">Jane</div>
    <div data-bind="text: lastName">Doe</div>
</div>

JavaScript

ko.bindingHandlers.useInitValueFor = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
        var $elem = $(element);
        console.log($elem);
        console.log($elem[0].children);
        var value = ko.utils.unwrapObservable(valueAccessor());
        console.log(value);
        for(var i=0;i<value.length;i++){
            var c = value[i];
            var e = $elem.children('[data-bind]');
            console.log(e);
        }
        
        //console.log(el);
        //console.log(ko.utils.unwrapObservable(valueAccessor()).length);
        console.log(allBindingsAccessor().with);
        console.log(viewModel);
        console.log(bindingContext);
        
        //console.log(element.childNodes);
        //var children = element.childNodes;
        //var children = el.find('')
        //console.log(children);
        //var temp = [];
        /*
        for(var i=0;i<children.length;i++){
            console.log(children[i].getAttribute('data-bind'));
            if(children[i].getAttribute('data-bind') !== undefined){
                temp.push(children[i]);
            }
        }
        console.log(temp);
        */

    }
};

function personViewModel(){
    this.person = {
        firstName: ko.observable(),
        lastName: ko.observable()
    };
}

$(document).ready(function(){
    var vm = new personViewModel();
    ko.applyBindings(vm);
});