Set knockout css binding based on item in observable array

Question

Whenever I save my item I remap the model doing the following:

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

My model looks like:

{
  "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."
    }
}

I want to set the css class on a div based on the contents of the BrokenRules array and was hoping I could do something 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 this doesn't seem to work. My filterByProperty, while firing the first time, doesn't have any items, and for some reason, never fires again.

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);
}

The filterByProperty was taken right from the knockoutjs site.

Any help on doing this would be much appreciated! Thanks!

Joseph Gabriel · Accepted Answer · 2013-05-02 15:29:29Z

2

The filterByProperty function is returning a ko.computed. In order to get the actual array, you need to execute the computed to get the underlying JavaScript array, and then you can check the length.

Notice the extra parentheses after filterByProperty()

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

See the Fiddle

edited May 2, 2013 at 15:29

answered May 2, 2013 at 15:19

Joseph Gabriel

8,5203 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mattruma Over a year ago

That worked perfectly! I swear those extra parentheses are going to be the death of me! :)

Joseph Gabriel Over a year ago

If you set up your computed to return an observableArray, then you could have two sets of them :)

Collectives™ on Stack Overflow

Set knockout css binding based on item in observable array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related