Set Нокаут CSS связывание на основе элемента в наблюдаемом массиве

Question

Всякий раз, когда я сохраняю мой деталь я переназначить модель, выполнив следующие действия:

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

Моя модель выглядит следующим образом:

{ 
    "DealId": 0, 
    "BrokenRules": [ 
    { 
     "Property": "EndDate", 
     "Description": "End Date is required." 
    }, 
    { 
     "Property": "CustomerId", 
     "Description": "Customer is required." 
    }, 
    { 
     "Property": "LiveState", 
     "Description": "Live State is required." 
    }, 
    { 
     "Property": "WorkState", 
     "Description": "Work State is required." 
    } 
} 

Я хочу, чтобы установить CSS класс на div на основе содержимого BrokenRules массива и надеялся, что я мог бы сделать что-то вроде:

<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> 

Но это не работает. Мой filterByProperty, при первом запуске, не имеет никаких элементов и по какой-то причине никогда не срабатывает снова.

ko.observableArray.fn.filterByProperty = function (propName, matchValue) { 
    return ko.computed(function() { 
     var allItems = this(), matchingItems = []; 
     for (var i = 0; i < allItems.length; i++) { 
      var current = allItems[i]; 
      if (ko.utils.unwrapObservable(current[propName]) === matchValue) 
       matchingItems.push(current); 
     } 
     return matchingItems; 
    }, this); 
} 

ФильтрByProperty был взят прямо с сайта knockoutjs.

Любая помощь в этом была бы высоко оценена! Благодаря!

Answer 1

Функция filterByProperty возвращает ko.computed. Чтобы получить фактический массив, вам нужно выполнить вычисление, чтобы получить базовый массив JavaScript, а затем вы можете проверить длину.

Обратите внимание на дополнительные круглые скобки после filterByProperty()

<div class="control-group" data-bind="css: { error: BrokenRules.filterByProperty('Property', 'EndDate')().length !== 0 }"> 

See the Fiddle