knockout.js - Set knockout css binding based on item in observable array -

whenever save item remap model doing following:

ko.mapping.fromjs(data, {}, deal); 

my model looks like:

{   "dealid": 0,   "brokenrules": [     {       "property": "enddate",       "description": "end date required."     },     {       "property": "customerid",       "description": "customer required."     },     {       "property": "livestate",       "description": "live state required."     },     {       "property": "workstate",       "description": "work state required."     } } 

i want set css class on div based on contents of brokenrules array , hoping like:

    <div class="control-group" data-bind="css: { error: brokenrules.filterbyproperty('property', 'enddate').length !== 0 }">         <label class="control-label">end date</label>         <div class="controls">             <input type="text" class="span2" name="enddate" data-bind="value: enddate, enable: $index() === 0" />         </div>     </div> 

but doesn't seem work. filterbyproperty, while firing first time, doesn't have items, , reason, never fires again.

ko.observablearray.fn.filterbyproperty = function (propname, matchvalue) {     return ko.computed(function () {         var allitems = this(), matchingitems = [];         (var = 0; < allitems.length; i++) {             var current = allitems[i];             if (ko.utils.unwrapobservable(current[propname]) === matchvalue)                 matchingitems.push(current);         }         return matchingitems;     }, this); } 

the filterbyproperty taken right knockoutjs site.

any on doing appreciated! thanks!

the filterbyproperty function returning ko.computed. in order actual array, need execute computed underlying javascript array, , can check length.

notice parentheses after filterbyproperty()

<div class="control-group" data-bind="css: { error: brokenrules.filterbyproperty('property', 'enddate')().length !== 0 }"> 

see fiddle