CODEWITHSUNDEEP
asp.netknockout.js
mvc_help
mvc_help

Reputation: 187

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!

Upvotes: 2

Views: 32

Answers (1)

user3297291
user3297291

Reputation: 23372

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);
}

Upvotes: 2

Related Questions