Reevaluating computed observables

by shriek

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<ul data-bind="foreach: highPriorityItems">
    <li>
        <span data-bind="text: name"></span>
    </li>
</ul>
<button data-bind="click: addNewDataBad">Add New Bad</button>
<button data-bind="click: addNewDataGood">Add New Good</button>
<button data-bind="click: addNewData">Add New Simplified</button>
<hr />
Reevaluation Count: <span data-bind="text: highPriorityItems.reevaluationCount"></span>

CSS

ul { margin-left: 10px; }
a { text-decoration: none; }

JavaScript

//track the number of re-evaluations for a computed observable
ko.dependentObservable.fn.trackReevaluations = function() {
    this.reevaluationCount = ko.observable(0);
    this.subscribe(function() {
        this.reevaluationCount(this.reevaluationCount() + 1);
    }, this);        
    return this;
};

var newData = [
    { name: "Task Four", priority: "normal" },
    { name: "Task Five", priority: "high" },
    { name: "Task Six", priority: "high" },
    { name: "Task Seven", priority: "normal" },
    { name: "Task Four", priority: "normal" },
    { name: "Task Five", priority: "high" },
    { name: "Task Six", priority: "high" },
    { name: "Task Seven", priority: "normal" },
    { name: "Task Four", priority: "normal" },
    { name: "Task Five", priority: "high" },
    { name: "Task Six", priority: "high" },
    { name: "Task Seven", priority: "normal" },
    { name: "Task Four", priority: "normal" },
    { name: "Task Five", priority: "high" },
    { name: "Task Six", priority: "high" },
    { name: "Task Seven", priority: "normal" },
    { name: "Task Four", priority: "normal" },
    { name: "Task Five", priority: "high" },
    { name: "Task Six", priority: "high" },
    { name: "Task Seven", priority: "normal" },
    { name: "Task Four", priority: "normal" },
    { name: "Task Five", priority: "high" },
    { name: "Task Six", priority: "high" },
    { name: "Task Seven", priority: "normal" },
    { name: "Task Four", priority: "normal" },
    { name: "Task Five", priority: "high" },
    { name: "Task Six", priority: "high" },
    { name: "Task Seven", priority: "normal" },
    { name: "Task Four", priority: "normal" },
    { name: "Task Five", priority: "high" },
    { name: "Task Six", priority: "high" },
    { name: "Task Seven", priority: "normal" },
    { name: "Task Four", priority: "normal" },
    { name: "Task Five", priority: "high" },
    { name: "Task Six", priority: "high" },
    { name: "Task Seven", priority: "normal" },
    { name: "Task...