mvc_help mvc_help - 3 months ago 7
ASP.NET (C#) Question

Knockout.js - Doesn't seem to bind properly, can't figure out why

I'm sure this is a simple fix but I am wrecking my brain trying to figure this out.

Below is the main parts of the code.

JS

//Viewmodel
var PurchaseOrderModel = function () {
var self = this;

self.OrderNumber = ko.observable();
self.Description = ko.observable();

self.GetPurchaseOrder = function(Id) {
//
$.ajax({
type: "GET",
url: 'URL' + Id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
self.OrderNumber = ko.observable(data.OrderNumber);
self.Description = ko.observable(data.Description);
},
error: function (err) {
alert(err.status + " : " + err.statusText);
}
});
}
}

//DOM Loaded
$(document).ready(function () {
var po = new PurchaseOrderModel();
ko.applyBindings(po);

po.GetPurchaseOrder(124028);
});


HTML

<div>
<input id="test" type="text" data-bind="value: OrderNumber">
<input type="text" data-bind="value: Description">

<p type="text" data-bind="text: OrderNumber"></p>
</div>


Controller

return Json(new
{
OrderNumber = model.OrderNumber,
Description = model.Description
}, JsonRequestBehavior.AllowGet);


This is what I see in the inspector Network tab

{"OrderNumber":115548,"Description":"Test"}


So the data is being returned, I'm just wondering why the UI isn't catching it / binding properly.

Any insight is appreciated!

Answer

Instead of replacing your old observable with a new one like you do here:

success: function (data) {
  self.OrderNumber = ko.observable(data.OrderNumber);
  self.Description = ko.observable(data.Description);
}

You have to set the observable you've already defined with a new value, like so:

success: function (data) {
  self.OrderNumber(data.OrderNumber);
  self.Description(data.Description);
}
Comments