knockout binding after array updated
===

I have an array that I'm removing items from but I'm keeping count of the number of items to do UI formatting. I need to be able to have the bind update.


        ko.applyBindings(viewModel);
        getFoos();
    
    
    var viewModel = {
        foos: ko.observableArray([]),
    
        reloadFoos: function () {
            getFoos();
        },
        
        removeFoo: function () {
            remove(this);
        }
    };
    
    var foo = function () {
        this.Id = ko.observable();
        this.Name = ko.observable();
        this.Count = ko.observable();
    };
    
    function remove(foo) {
        viewModel.foos.splice(viewModel.foos.indexOf(foo), 1);
    
        viewModel.foos.each(function(index) {
            viewModel.foos[index].Count = index%10 == 0;
        });
    }
    
    function getFoos() {
        viewModel.foos([]);
        $.get("/myroute/", "", function (data) {
    
            for (var i = 0; i < data.length; i++) {
                var f = new foo();
                f.Id = data[i];
                f.Name = data[i];
                f.Count = i%10 == 0;
                viewModel.foos.push(f);
            }
    
        });
    }
    
                <div data-bind="foreach: foos">
                    <div style="float: left">
                            <a href="javascript:void(0);" data-bind="click : $parent.removeFoo, attr: { id: Id }">
                                <label data-bind="value: Name"></label>
                            </a>
                    </div>
                    <!-- ko if: Count -->
                    <div style="clear: left"></div>
                    <!-- /ko -->
                </div>

When the click event fires the item is removed from the array but the if bind doesn't get updated and the ui formatting is off. I'm trying to keep from reloading the data because the ui block bounces as it removes and reloads. 