title: knockoutjs get count of items that meet a condition
body: <p>I have a view model that has an observable array in it which inside has an observable array.  I want to keep track when users check items off their lists.  I have the following view model and html:</p>
  
  <pre><code>var mydata = {
          Incomplete: ko.computed(function () {
             // return the count of items that are not IsActive
          }),
          Categories: ko.observable([
                {
                    Description: "Dairy", ListItems: ko.observableArray([
                    { Description: "Eggs", Quantity: "1 Dz.", IsActive: ko.observable(false) },
                     { Description: "Milk", Quantity: "1 Gallon", IsActive: ko.observable(false) }
                    ])
                },
                {
                    Description: "Produce", ListItems: ko.observableArray([
                        { Description: "Lettuce", Quantity: "1 Head", IsActive: ko.observable(false) },
                        { Description: "Oranges", Quantity: "5 ea.", IsActive: ko.observable(false) },
                        { Description: "Greenbeans", Quantity: "1 Thingy", IsActive: ko.observable(false) },
                    ])
                },
          ])
      };
  
  &lt;div data-bind="foreach: Categories" id="list-items"&gt;
              &lt;h3 data-bind="text: Description" id="list-heading"&gt;&lt;/h3&gt;
              &lt;ul data-bind="foreach: ListItems"&gt;
                  &lt;li&gt;
                      &lt;div class="title"&gt;
                          &lt;input type="checkbox" data-bind="checked: IsActive"/&gt;
                          &lt;input type="text" data-bind="value: Quantity, disable: IsActive" class="input-readonly" readonly /&gt;
                          &lt;input type="text" data-bind="value: Description, disable: IsActive" class="input-readonly" readonly /&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div &gt;
              &lt;span data-bind="text: Incomplete"&gt;&lt;/span&gt;
              &lt;span &gt;Items left in your list&lt;/span&gt;
          &lt;/div&gt;
  </code></pre>