Question

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.

Answer 1

Your UI is not being updated because when you do your assignment to Count, you aren’t assigning as an observable. You are replacing the observable with a straight boolean value. So, your assignment calls like this one:

viewModel.foos[index].Count = index%10 == 0;

Will cause viewModel.foos[index].Count to be equal to true or false and the value won’t be stored in the observable.

That line should be this instead:

viewModel.foos[index].Count(index%10 == 0);

That will set the observable correctly. Note that you must change all of your assignments to observables to be set this way. See the “Reading and Writing Observables” section of this page: Knockout Observables.