KnockoutJs mapping JSON to viewmodel

Question

I'm having problem with binding JSON from ASP.net webform webapi to the viewmodel with KnockoutJs. There is no problem with wepapi and mapping to mappedQuickEntries.

Where did I get it wrong? Thanks.

Error:

Error: Unable to parse bindings. Message: ReferenceError: ItemPartNumb is not defined; Bindings value: value: ItemPartNumb

View:

<div>    
<table border="1" cellpadding="0" cellspacing="0">
 <tbody data-bind="foreach: quickEntries">
   <tr>
        <td data-bind="value: ItemPartNumb"></td>
        <td data-bind="value: ItemDescription"></td>     
    </tr>
 </tbody>
</table>

ViewModel:

<script type="text/javascript">

var QuickEntry = function(_itemPartNumb, _itemDescription) {    
    this.ItemPartNumber = ko.observable(_itemPartNumb);
    this.ItemDescription = ko.observable(_itemDescription);        
};

function QuickEntriesViewModel () {        

    var self = this;
    self.quickEntries = ko.observableArray([]);

    $.ajax({
        url: '/DesktopModules/Blah/API/Data/GetTenQuickEntries',
        type: 'GET',
        dataType: 'json',
        success: function (data) {                
            var mappedQuickEntries = $.map(data, function (item) {
                return new QuickEntry(item.ItemPartNumb, item.ItemDescription);
            });

            self.quickEntries(mappedQuickEntries);              
        },
        statusCode: {
            404: function () {
                alert('Failed');
            }
        }
    });
};

ko.applyBindings(new QuickEntriesViewModel());

Markus Jarderot Markus Jarderot · Accepted Answer · 2012-12-05T23:48:17

ItemPartNumb vs ItemPartNumber

And you are using the value-binding instead of the text-binding.

http://jsfiddle.net/MizardX/9sqvk/

KnockoutJs mapping JSON to viewmodel

1 Answers