Knockout.JS Observable Array via AJAX bound to DropDownList

Question

I am trying to fill my view model with some drop down options from the database. I want to keep track of the selected object because it has properties on it that I am using in a custom binding elsewhere.

I initialize the observable with a "blank" value so that it's properly set when the binding occurs and my custom binding works. Once the server responds, I morph the data to an observable array and the drop down list displays the options.

Here is the JavaScript code:

ko.bindingHandlers.jq_fade = {
    init: function (element, valueAccessor) {
        // Initially set the element to be instantly visible/hidden depending on the value
        var value = valueAccessor();
        $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
    },
    update: function (element, valueAccessor) {
        // Whenever the value subsequently changes, slowly fade the element in or out
        var value = valueAccessor();
        ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
    }
};

function Firm(id, name, outsideCounsel) {
    this.name = name;
    this.id = id;
    this.outsideCounsel = outsideCounsel;
}

function RequestViewModel() {
    var self = this,
        ONE_DAY = 1000 * 60 * 60 * 24;


    self.firm = ko.observable(new Firm(-1, "", false));

    $.post(ajaxAddress + 'LoadFirms', function (data) {
        var mappedFirms = $.map(data.d, function (item) {
            return new Firm(item.OrganizationLookupID, item.OrganizationLookupName, item.IsExternalCounselFirm);
        });
        self.availableFirms(mappedFirms);
        self.firm(self.availableFirms()[0]);
    });
}


$(document).ready(function () {
    model = new RequestViewModel();
    ko.applyBindings(model);
});

Here is the relevant HTML

<span data-bind="jq_fade: firm().outsideCounsel">
    Outside Counsel
    <input type="text" id="outsideCounsel" data-bind="value: outsideCounsel" />
</span>

I want that DIV to show only if the selected firm is an outside counsel. If remove the line data-bind="jq_fade: firm().outsideCounsel, everything works fine. If I make the $.post() calls synchronously, it works. I'm thinking it's something wrong with my init function in jq_fade.

The error I receive is:

Uncaught Error: Unable to parse bindings. Message: TypeError: Cannot call method 'outsideCounsel' of undefined; Bindings value: jq_fade: firm().outsideCounsel()

I understand what Knockout is telling me, I'm just not sure how firm() can ever be undefined because I set up an initial value.

Are you sure the server returns any data? If it's not then this line self.firm(self.availableFirms()[0]); may reset self.firm to undefined — Roman Bataev
– Roman Bataev, Commented Feb 8, 2012 at 21:18
You may have to specify "json" as a last parameter to $.post. — Roman Bataev
– Roman Bataev, Commented Feb 8, 2012 at 21:24
Yes I am sure the server is returning data. You're right about specifying "json." I'm doing that further up in the page though with an $.ajaxSetup() call. — arb
– arb, Commented Feb 9, 2012 at 14:24

soniiic · Accepted Answer · 2012-02-09 14:39:58Z

1

If you're binding availableFirms() to a dropdownlist, I'm assuming you've also bound firm() to the same list so that when another is selected from the list, firm() gets automatically updated and all your bindings update automatically.

If this is the case, you do not need to set firm() at all as it will be set to the first element in the dropdownlist anyway.

See example 3 here:

http://knockoutjs.com/documentation/options-binding.html

var viewModel = {
    availableCountries : ko.observableArray([
        new country("UK", 65000000),
        new country("USA", 320000000),
        new country("Sweden", 29000000)
    ]),
    selectedCountry : ko.observable() // Nothing selected by default
};

Try it like above without specifically setting firm() and see if it errors again

answered Feb 9, 2012 at 14:39

soniiic

2,6952 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Knockout.JS Observable Array via AJAX bound to DropDownList

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related