Question

I am banging my head against a wall here, trying to figure out why I can’t get this to work. I have tried following many examples and have stripped everything I have tried down to what I have below.

So, on my aspx page, I have:

<input type="radio" data-bind="value: individual" />Individual

Here is my javascript:

var serviceBase = 'http://localhost:49906/PopulationSelection.aspx/';
var getSvcUrl = function (method) { return serviceBase + method; };

var ajaxGetJson = function (method, jsonIn, callback) {
    $.ajax({
        url: getSvcUrl(method),
        type: "GET",
        data: ko.toJSON(jsonIn),
        dataType: "json",
        contentType: "application/json",
        success: function (json) {
            callback(json.d);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr + ' ' + thrownError);
        }
    });
}

var batchesDataService = {
    getSavedBatches: function (callback) {
        ajaxGetJson("GetBatches", null, callback);
    }
};

var Batch = function (p) {
    this.individual = ko.observable(p.Individual);
    this.household = ko.observable(p.Household);
    this.countOnly = ko.observable(p.CountOnly);
    this.femalePrimary = ko.observable(p.FemalePrimary);
    this.eventManagement = ko.observable(p.EventManagement);
    this.eventManagementText = ko.observable(p.EventManagementText);
    this.randomSampling = ko.observable(p.RandomSampling);
    this.randomSamplingText = ko.observable(p.RandomSamplingText);
    this.stateHasChanged = ko.observable(false);
};

var loadBatchesCallback = function (data) {
    var parsed = JSON.parse(data);
    myViewModel.Batch = new Batch(parsed);
    //also tried:
    //myViewModel.Batch(new Batch(parsed));
};

var myViewModel;
var viewModel = function () {
    this.Batch = ko.observable();
    this.getBatchInfo = function () {
        batchesDataService.getSavedBatches(loadBatchesCallback);
    };
};

$(document).ready(function () {
    myViewModel = new viewModel();
    myViewModel.getBatchInfo();
    ko.applyBindings(myViewModel.Batch);
});

I am having no problem getting the data back from my webmethod (using for Session access) and I see the correct info when I alert the Batch members.

My problem comes with the actual ko.applyBindings(). No matter what I have tried, I get the following error in the Console:

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

Any help is appreciated!

Answer 1

Asynchronicity.

You are calling ko.applyBindings before the ajax callback is getting called, so it doesn’t have the value yet.

You may want to call applyBindings somewhere in your callback.