function DictionaryEntry() { var self = this; self.Simplif...">

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)

+3
source share
2 answers

There is a callback called update by knockout.

, , ( viewModel). , .

http://knockoutjs.com/documentation/plugins-mapping.html

Customizing object updating using "update"

+3

, , "ko.mapping.fromJS(result, viewModel)". entry .

0

All Articles