ko observableArray updates, but bound select list not updating

Question

I'm somewhat new to using Knockout, and I've run into an problem. I've got search functionality that returns JSON data and updates an observableArray which populates a select list. I've got it loading a default set on initial load, and then you can search on keyword text, it makes a web api call and it updates the observableArray. This all works, but the select list doesn't update. I'm sure I'm just missing something simple, but haven't been able to figure out what it is. I've created a fiddle that reproduces what I'm doing with the same lack of results.

Here's the HTML:

<button href="#" data-bind="click: updateSearch">Search</button><br/>
<select data-bind="options: customerResults, 
                   optionsText: function(item) {
                                return item.Name
                            }, 
                   value: selectedCustomer,
                   optionsCaption: '- Please Select -', 
                   valueUpdate: 'change'" size="15">
</select>

Here's the JS:

    $(function () {

    var custResult = function(Id, Name, Address1, City, State) {
        this.Id = Id;
        this.Name = Name;
        this.Address1 = Address1;
        this.City = City;
        this.State = State;
    };

// Test data for initial binding    
var data = [
        new custResult(1, "Test1", "123 Fake St", "Springfield", "VT"),
        new custResult(2, "Test2", "123 Fake St", "Springfield", "VT"),
        new custResult(3, "Test3", "123 Fake St", "Springfield", "VT"),
    ];

// Test data for rebinding
var data2 = [
        new custResult(1, "TestA", "123 Fake St", "Springfield", "VT"),
        new custResult(2, "TestB", "123 Fake St", "Springfield", "VT"),
        new custResult(3, "TestC", "123 Fake St", "Springfield", "VT"),
        new custResult(1, "TestD", "123 Fake St", "Springfield", "VT"),
        new custResult(2, "TestE", "123 Fake St", "Springfield", "VT"),
        new custResult(3, "TestF", "123 Fake St", "Springfield", "VT"),
    ];

    var viewModel = {
        customerResults: ko.observableArray(data),
        selectedCustomer: ko.observable(),
        updateSearch: function () {
            this.customerResults = null;
            this.customerResults = data2
            alert("item " + this.customerResults.length.toString() + " = " + this.customerResults[this.customerResults.length - 1].Name.toString());
        },
        nameVisible: ko.observable(true)
    };

    ko.applyBindings(viewModel);
});

Here's the fiddle. http://jsfiddle.net/bsdavey/4M2Rh/

Any idea what I'm doing wrong here?

Answer 1

The problem is in the updateSearch function.

When you use observable (or observableArray), you should set it as follow :

this.customerResults(data2);

If you set the observable as above, KO will be notified that the observableArray and it KO will refresh the view. Otherwise, if you reassign the property (this.customerResults = data2) you 'lose' the array which is bound to the view.

See updated fiddle