Two data bind attributes are not working in KnockoutJS

Question

I am using a function which is returning an integer value based on that I am looping it to generate html divs. Please see the below code:

<div data-bind="foreach: new Array(getCartTotalParam())">
     <div data-bind='text : $index()+1, css: { active: getCartParam("summary_count") >= $index()+1 }'></div>
</div>

the getCartTotalParam() is returning an integer let say 21, so I am generating 21 divs inside it. Now I want to add a css class (as active). The logic is I have used css binding which is call getCartParam("summary_count") . It checks the returned value and the loop's iteration index and based on this comparison I want to add css class.

But my code is not working. I have referred the doc but can't figure out what was missing.

Answer 1

I don't see anything wrong with your code given above. There might be a mistake in your logic.

The css binding with the above-given (question) syntax would apply active css if the given expression getCartParam("summary_count") >= $index()+1 is true otherwise it will not apply anything.

Here is working jsbin

Answer 2

You should change your $index()+1 as ($index()+1) in your <div> tag like this,

<div data-bind='text : $index()+1, css: { active: getCartParam("summary_count") >= ($index()+1) }'></div>

Here is a working DEMO for you: http://jsfiddle.net/GSvnh/5689/

Hope this helps!