JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div data-bind="with: test" >
        <div data-bind="with: name">
            <span data-bind="text:firstName"></span>
            <span data-bind="text:firstName"></span>
        </div>
        <span data-bind="click: $parent.fullName">FullName</span>
    </div>
</div>

JavaScript

modal = function(){
    var firstName = ko.observable('jhon'),
        lastName = ko.observable('deo'),
        test = {
            name : {
              firstName: firstName,
              lastName: lastName
           },
            fullName : function(){
                /* alert(name.firstName() + name.lastName()); */
                console.log(name)
            }
        };

    return {
        test: test
    }
}();

ko.applyBindings(modal);