Knockout Computed ObservableArray Subscription

SO-Question

HTML

<label>Multiple Toppings:
    <input type="checkbox" data-bind="checked: multiselectable" />
    <em data-bind="if: !multiselectable()">pick only one topping</em>
</label>
<h2>Available</h2>
<ul data-bind="foreach: toppings">
    <li data-bind="text: label, click: $parent.addTopping"></li>
</ul>
<h2>Selected</h2>
<ul data-bind="foreach: iceCream.toppings">
    <li data-bind="text: label, click: $parent.removeTopping">
    </li>
</ul>

JavaScript

function Topping(options) {
    this.label = ko.observable(options.label);
}

function IceCream(){
    this.toppings = ko.observableArray([]);
};

var toppings = ko.observableArray([
        new Topping({label: 'Sprinkles'}),
        new Topping({label: 'Marshmallows'}),
        new Topping({label: 'Nuts'})
    ]);
var iceCream = new IceCream();
var multiselectable = ko.observable(false);
var viewModel = {
    multiselectable: multiselectable,
    iceCream: iceCream,
    toppings: toppings,
    addTopping: function(topping){
        if( multiselectable() || iceCream.toppings().length < 1)
            if( iceCream.toppings.indexOf(topping) == -1 )
                iceCream.toppings.push(topping);
    },
    removeTopping: function(topping){
        iceCream.toppings.remove(topping);
    }
};

ko.applyBindings(viewModel);