http://stackoverflow.com/questions/7400387/knockoutjs-databind-to-a-dictionary-collection
http://stackoverflow.com/questions/7400387/knockoutjs-databind-to-a-dictionary-collection
HTML
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<table>
<tbody data-bind="foreach: mapDictionaryToArray(contents())">
<tr>
<td> <span id="textKey" data-bind="text: key"></span>
</td>
<td>
<input data-bind="value:value,visible:isEditing()" />
<label data-bind="text:value,visible:!isEditing()" />
</td>
<td>
<a href="#"
data-bind="click: $root.edit">
Edit</a>
<a href="#"
data-bind="">
Apply</a>
<a href="#"
data-bind="click: $root.cancel">
Cancel</a>
</td>
</tr>
</tbody>
</table>
JavaScript
var viewModel = {
contents: ko.observable({
"reference": "2Z94",
"car_id": "9861"
}),
mapDictionaryToArray: function (dictionary) {
var result = [];
for (var key in dictionary) {
if (dictionary.hasOwnProperty(key)) {
result.push({
key: key,
value: ko.observable(dictionary[key]),
isEditing: ko.observable(false)
});
}
}
return result;
},
edit: function (item) {
item.isEditing(true);
},
cancel: function (item) {
item.isEditing(false);
}
};
$(document).ready(function (event) {
ko.applyBindings(viewModel);
});