KnockoutJS: problems with ko.mapping.fromJS
My JS:
<script type="text/javascript">
function DictionaryEntry() {
var self = this;
self.Simplified = ko.observable("");
self.Traditional = ko.observable("");
self.Phonetic = ko.observable("");
self.Definition = ko.observable("");
}
function DictionaryModel() {
var self = this;
self.entries = ko.observableArray([]);
}
var viewModel = new DictionaryModel();
viewModel.update = function () {
var self = this;
var f = $("#fSearch");
$.ajax({
url: f.attr('action'),
type: f.attr('method'),
data: f.serialize(),
success: function (result) {
self.entries = ko.mapping.fromJS(result, viewModel);
}
});
return false;
}
ko.applyBindings(viewModel);
</script>
Html table:
<table class="table table-striped">
<thead>
<tr>
<th>@T("Simplified")</th>
<th>@T("Traditional")</th>
<th>@T("Phonetic")</th>
<th>@T("Definition")</th>
</tr>
</thead>
<tbody data-bind="foreach: entries">
<tr>
<td data-bind="text: Simplified"></td>
<td data-bind="text: Traditional"></td>
<td data-bind="text: Phonetic"></td>
<td data-bind="text: Definition"></td>
</tr>
</tbody>
</table>
The button that starts the update .. searches for a dictionary and returns results to replace what is currently in the table:
<input type="submit" value="Search" class="btn" data-bind="click: update" />
in my action method, this is what returns:
return Json(new
{
// here list is a List<T> with the 4 properties to display in UI
entries = list,
IndexOfPage = indexOfPage,
SizeOfPage = sizeOfPage,
TotalRecords = totalRecords,
Pages = (int)Math.Ceiling((double)totalRecords / sizeOfPage)
});
The problem I am facing is that for some reason it is stuck in an infinite loop. I set a breakpoint in action, and I see this happening again and again ... continuously.
What am I doing wrong? Completely new for knockout (and not quite super in JS, so please don't give a vague answer)
There is a callback called update by knockout.
, , ( viewModel). , .
http://knockoutjs.com/documentation/plugins-mapping.html
Customizing object updating using "update"