JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<table>
<tr>
<td>Primary Classification</td>
<td>Manufacturer Name</td>
<td>Description</td>
<td>Size</td>
</tr>
<tr>
<td>
<input class="itemText" type="text" data-bind=" value: primaryClassification, disable: false" />
</td>
<td>
<input class="itemText" type="text" data-bind="value: manufacturerName, disable: false" />
</td>
<td>
<input class="itemText" type="text" data-bind="value: description, disable: false" />
</td>
<td>
<input class="itemText" type="text" data-bind="value: size, disable: false" />
</td>
</tr>
</table>
<div>Long Description:</div>
<input class="itemText" type="text" data-bind="value: longDescription, disable: true" />
JavaScript
function AppViewModel() {
var self = this;
self.primaryClassification = ko.observable('');
self.manufacturerName = ko.observable('');
self.description = ko.observable('');
self.size = ko.observable('');
self.longDescription = ko.observable();
self.primaryClassification.subscribe(function () {
updateLongDescription(self);
});
self.manufacturerName.subscribe(function () {
updateLongDescription(self);
});
self.description.subscribe(function () {
updateLongDescription(self);
});
self.size.subscribe(function () {
updateLongDescription(self);
});
}
function updateLongDescription(self){
var value = self.primaryClassification() + self.manufacturerName()
value += self.description() + self.size();
self.longDescription(value);
}
ko.applyBindings(new AppViewModel());