Not understanding ko.obseravables

Question

So consider the following:

(function($, ko){
    var ViewModel = function() {
        var self           = this;
        self.errorMessages = ko.observableArray([]);

        self.desigItems    = ko.observableArray([]);
        self.frequencies   = ko.observableArray([]);
    }

    var viewModel = new ViewModel();

    var loadData = function() {
        $.ddcApiGet('/widget/desigs.json', [], function(data) {
            _processLoadedData(data);
        }, viewModel.errorMessages);
    }

    var loadFrequencies = function() {
        $.ddcApiGet('/widget/freqs.json', [], function(data) {
            _processFrequenciesData(data);
        }, viewModel.errorMessages);
    }

    var _processLoadedData = function(data) {
        for (var i = 0; i < data.desig_options.length; i++) {
            viewModel.desigItems.push(data.desig_options[i]);
        }
    }

    var _processFrequenciesData = function(data) {
        var frequencies = [];

        // Get the list of frequencies.
        for (var i = 0; i < data.frequency.length; i++) {
            frequencies.push(data.frequency[i]);
        }

        // Push frequencies on to each of the design items in the list.
        for (var i = 0; i < viewModel.desigItems.length; i++) {
            viewModel.desigItems[i]['frequencies'] = frequencies
        }

        console.log(viewModel.desigItems());
    }

    var preBind = function() {
        loadData();
        loadFrequencies();
    }

    preBind();
    ko.applyBindings(viewModel, $('#designnation-list-container')[0]);

})(jQuery, ko);

Which is then associated with the following view:

Hello World



         
        

        

            

             
                
                    Donation Amount
                
            

            

                
                    $  

                
            

            
                
                Amount:
                $
                 
            

            
                
            

            
                Gift Notes

Its a lot to take in I know but I am having issues with one specific function: _processFrequenciesData

See the issue is that I have a select element:

As you may see from the initial view I posted, this select element is inside a loop that loops over the self.desigItems

There is a console.log in this function (_processFrequenciesData) but it returns: []

Which you would think, ok maybe the data isn't fetched, accept it is at this point, because 7 items get rendered to the screen.

What I am trying to do is say, ok: add this list of frequencies to each of the desigItems

So why is it when I console.log(viewModel.desigItems) I get an empty array back, yet when the view walks over the desigItems, I get seven things back?

Tomalak · Accepted Answer

An observableArray is not an array. It is a function (!) that wraps an array (just as an observable is not a value, but a function that wraps a value). To retrieve the actual value an observable must be called:

// Push frequencies on to each of the design items in the list.

var desigItems = viewModel.desigItems(); // access the underlying array
for (var i = 0; i < desigItems.length; i++) {
    desigItems[i].frequency = frequencies[i];
}
viewModel.desigItems.notifySubscribers();
console.log(viewModel.desigItems());

What you did was adding properties to the observable itself, but that does not affect the value the observable contains.

Now, since we have changed the underlying value of viewModel.desigItems without giving knockout a chance to notice, we must call notifySubscribers() to inform everyone that the observable has changed.

That being said, I would rewrite your entire code like so:

(function($, ko){
    function ViewModel() {
        var self = this;
        self.errorMessages = ko.observableArray();
        self.desigItems    = ko.observableArray();
        self.frequencies   = ko.observableArray();
    }

    var viewModel = new ViewModel();

    $(function () {
        ko.applyBindings(viewModel, $('#designnation-list-container')[0]);
    });

    var desigsReq = $.ddcApiGet('/widget/desigs.json').done(viewModel.desigItems);
    var freqsReq = $.ddcApiGet('/widget/freqs.json').done(viewModel.frequencies);

    $.when(desigsReq, freqsReq).done(function (desigs, freqs) {
        desigs.forEach(function (desig, i) {
            desig.frequency = freqs[i];
        });
    }).fail(viewModel.errorMessages);

})(jQuery, ko);

This fixes two timing issues in your code:

You can't bind a viewmodel before the document is ready.
You must wait for both Ajax requests to finish before you can combine the results.

Whether it's actually useful to combine the two arrays in this manner is a different matter. I'd say it's not a very clean solution to begin with.

P.S.: You really could have made this question shorter, virtually none of the code you have posted has anything to do with the issue at hand.

Not understanding ko.obseravables

Answers (2)

Related Questions