Knockout returning data from ajax call

Question

Okay, so I'm fairly new to knockout and I've got a good handle on data-bind. However, there's a pattern that another programmer put together and I'm wanting to follow it in the same program just a different form. This is .NET C# MVC5 VMMV. When I use the code written on the other programmer's page everything returns as it should. Mine returns but the data binding isn't working.

both are declared in viewmodel both are called through ajax in model both return data:

This is in the .cshtml file HIS CODE: returns profileData ko.observable and returns the label text

<div class="btn-group margin-top-md pull-right" data-bind="with: profileData">
<label class="btn btn-success btn-xs active" data-bind="text: opportunityName">
</label>
<label class="btn btn-success btn-xs" data-bind="text: status">
</label>
<label class="btn btn-success btn-xs" data-bind="text: strengthIsCustom">
</label>
</div>

MY CODE: returns getContacts ko.observable, populates getContacts but does not return label test.

<div class="btn-group margin-top-md pull-right" data-bind="with: contactData">
<label class="btn btn-success btn-xs active" data-bind="text: TotalPublished">
</label>
<label class="btn btn-success btn-xs" data-bind="text: TotalUnpublished">
</label>
<label class="btn btn-success btn-xs" data-bind="text: TotalContacts">
</label>
</div>

Functions are identical: MINE:

 function getContacts() {
    model.getContacts().then(function (data) {

        contactData({
            TotalUnpublished: data.TotalUnpublished,
            TotalPublished: data.TotalPublished,
            TotalContacts: data.TotalContacts
        });

    });
}

HIS:

function getProfileData() {
    model.getProfileData().then(function (data) {

        profileData({
            opportunityName: data.OpportunityName,
            status: data.OutcomeStatus,
            strengthIsCustom: data.Strength.IsCustomalysisStarted)
        });

    });
}

Does anything stand out here?

Check the browser console for any errors first. If not Errors, add a console.log(data), to check if you get any data — Hassan
There is a typo in 'his' function: trailing parenthesis after data.Strength.IsCustomalysisStarted). Have you left some stuff out? — mhu

Nathan Fisher Nathan Fisher · Accepted Answer · 2014-06-06T00:05:47

In your comments you say that getContacts returns an array of Contact data. It appears that you need to be using an observableArray for the storage of the contact data. assuming that you will want two way data-binding, you also need to loop through the data returned from the server and create a new ContactData object to be added to the array.

I have created a jsfiddle demo based on your code around the Contact. I have just made it work and chances are will need to be adjusted to fit your scenario.

JSFiddle Demo

HTML

<div class="btn-group margin-top-md pull-right" data-bind="with: contact">
  <label class="btn btn-success btn-xs active" data-bind="text: totalPublished"></label>
  <label class="btn btn-success btn-xs" data-bind="text: totalUnpublished"></label>
  <label class="btn btn-success btn-xs" data-bind="text: totalContacts"></label>
</div>

JavaScript
Note: using Q promises library to simulate returning data from server;

var model = {
    getContacts: function () {
        return Q.fcall(function () {
            return [{
                TotalUnpublished: 5,
                TotalPublished: 3,
                TotalContacts: 23
            }, {
                TotalUnpublished: 4,
                TotalPublished: 9,
                TotalContacts: 38
            }];
        });
    }
};

function ContactData(data) {
    var self = this;
    self.totalUnpublished = ko.observable(data.TotalUnpublished || 0);
    self.totalPublished = ko.observable(data.TotalPublished || 0);
    self.totalContacts = (data.TotalContacts || 0);
    return self;
}

var contacts = ko.observableArray([]);

function getContacts() {
    model.getContacts().then(function (data) {
        ko.utils.arrayForEach(data, function (item) {
            contacts.push(new ContactData(data));
        });
    });
}

var vm = {
    getContacts: getContacts,
    contacts: contacts
};
vm.getContacts();
ko.applyBindings(vm);

Knockout returning data from ajax call

1 Answers