Question

I have an observable array binding to a dropdownlist. The dropdownlist is populated on page load via ASP.NET MVC Html Helpers, but since the observable array is set to [], it removes everything. Is there a way to not have it remove everything on page load or initial apply bindings.

Answer 1

It sounds like you want to set the options from the observable array at a later time (from an AJAX call maybe?). Knockout doesn’t have any built-in way to do this. I see you have at least three options:

1. The obvious way is to have your ASP.NET code fill out the observable array instead of the select list. Then Knockout will do the right thing and populate your drop-down list.

2. Use a custom binding that wraps the options binding, but ignores empty arrays:

   ko.bindingHandlers.optionsNotBlank = {
       update: function (element, valueAccessor, allBindingsAccessor) {
           var value = ko.utils.unwrapObservable(valueAccessor());
           if (value.length)
               ko.bindingHandlers.options.update(element, valueAccessor, allBindingAccessor);
       }
   };
   

3. Set the options binding on the drop-down list dynamically. This is not a published feature, but does use an exported Knockout method. Instead of using the standard data-bind attribute, you’ll be using the ko.applyBindingsToNode method and passing it a binding object after you’ve filled in your observable array. You’ll need to be careful to only call ko.applyBindingsToNode once though.

   viewModel.myArrayOfItem(newValues);
   if (!boundDropDown) {
       ko.applyBindingsToNode(document.getElementById("mydropdown"), { options: viewModel.myArrayOfItems }, viewModel);
       boundDropDown = true;
   }
   

Edit:

Here’s a fourth option based on the comments using a “dirty” flag:

    ko.bindingHandlers.optionsNotBlank = {
        update: function (element, valueAccessor, allBindingsAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                isDirty = element._isDirty;
            if (isDirty || value.length) {
                element._isDirty = true;
                ko.bindingHandlers.options.update(element, valueAccessor, allBindingAccessor);
            }
        }
    };