CODEWITHSUNDEEP
knockout.js
Tamara Pattinson
Tamara Pattinson

Reputation: 87

Knockout returning data from ajax call

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?

Upvotes: 0

Views: 999

Answers (1)

Nathan Fisher
Nathan Fisher

Reputation: 7941

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

Upvotes: 0

Related Questions