JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.debug.js"></script>
<script type="text/html" id="row">
<tr data-bind="visible: property">
<td>
The value is:
</td>
<td>
<input type="text" data-bind="value: property" />
</td>
<td></td>
</tr>
<tr>
<td>
The value is:
</td>
<td data-bind="text: property"></td>
<td>
(this will always be visible)
</td>
</tr>
</script>
<table id="datatable">
<tbody data-bind="template: { name: 'row', foreach: data }"></tbody>
</table>
<button id="toggle">Show wrongfully hidden row</button>
JavaScript
var viewModel = {
values: ko.observableArray(),
data: ko.observableArray()
};
viewModel.values.subscribe(function (newValues) {
var newData = null,
result = [],
originalData, prop;
for (var i = 0, j = newValues.length; i < j; i++) {
if (newData === null) {
newData = newValues[i];
result.push(newData);
} else {
newData.originalData = newValues[i];
//find all observable properties and copy their value to the editable one
if (newData.originalData) {
for (prop in newData.originalData) {
if (newData.originalData.hasOwnProperty(prop) && ko.isObservable(newData.originalData[prop])) {
newData[prop](newData.originalData[prop]());
}
}
}
newData = null;
}
}
viewModel.data(result);
});
$(function () {
ko.applyBindings(viewModel);
viewModel.values([
{ property: ko.observable() }, // will be send back to server
{ property: ko.observable('text') } // contains original data
]);
$('#toggle').click(function () {
$('#datatable').find(':hidden').show();
$(this).hide();
});
});