JSFiddle - React, Tailwind, and code Playground

by thebluenile

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<!-- ko foreach: person -->
<div>
<label>Name: <input type="text" data-bind="textInput: name"/></label>
<label>Phone:<input type="tel" data-bind="textInput: $parent.getTelecom($index(), 1, 'tel:')"/></label>
<label>Email:<input type="email" data-bind="textInput:  $parent.getTelecom($index(), 0, 'mailto:')"/></label>
</div>
<!-- /ko -->

JavaScript

function ViewModel() {
	var vm = this;
    
    vm.person = [
    	{
        	name: ko.observable("The H. Dude"),
        	telecom: [
    			"mailto:dude@host.com",
    			"tel:+1-987-654-3210"
        	]
    	},
    	{
        	name: ko.observable("The I. Gal"),
        	telecom: [
    			"mailto:gal@host.com",
    			"tel:+1-987-654-3211"
        	]
    	}
    ];
    
    vm.getTelecom = function(personIndex, telIndex, prefix) {
        return ko.pureComputed({
            read() {
                return vm.person[personIndex].telecom[telIndex].substring(prefix.length);
            },
            write(newVal) {
                vm.person[personIndex].telecom[telIndex] = prefix + newVal;
                console.log(vm.person); // Note: for demonstration purposes
            }
        });
    }
   
}

ko.applyBindings(new ViewModel());