JSFiddle - React, Tailwind, and code Playground

by xdenser

HTML

<script src="https://github.com/xdenser/knockout-component/raw/master/knockout.component.js"></script>
<!-- ko template: { name:'labeledEdit', data: { id:'in1', caption:'Some Input 1', value: value1 }} -->
<!-- /ko -->
<!-- ko template: { name:'labeledEdit', data: { id:'in2', caption:'Some Input 2', value: value2 }} -->
<!-- /ko -->



<div>Text Entered : <span data-bind='text: value1()+" "+value2()'></span></div>

<script id='labeledEdit' type='text/html'>
<label data-bind='attr:{ for: id}'>
     <span data-bind='text: caption'></span>
    :
 </label>
<input data-bind='value:value, attr: {id:id}'>
</script>

JavaScript

var viewModel = {
      value1:ko.observable(),
      value2:ko.observable()
};
    
ko.applyBindings(viewModel);