JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div data-bind="component:{name:'name-editor',params:{ name: FirstName }}"></div>
<div >
<p data-bind='text:FullName'></p>
</div>
JavaScript
var home = function(params){
var self = this
self.name = params.name;
}
var nameEditorComponent = {
viewModel:home,
template:"<input type='text' data-bind='value:name'>"
}
var vm = function(){
var self = this
self.FirstName = ko.observable('')
self.LastName = ko.observable('Raheel')
self.FullName = ko.computed(function(){
return self.FirstName() +' '+self.LastName()
})
}
ko.components.register('name-editor',nameEditorComponent)
ko.applyBindings(new vm())