注释中的条件运算符floatval

Question

I'm trying to make a conditional statement that renders an element depending on the floatval-value inside a property of an observableArray I'm iterating over

When I render the value itself it works:

<span data-bind="text: stinger.points"></span>

For each in the observableArray I see the correct value, such as "3.2".

Heres my actual statement, but none of them gets displayed in the computed html:

<!-- ko if: stinger.points  >1.49 && stinger.points <2.49 -->
    <div>1.5 - 2.48</div>       
<!-- /ko -->            
<!-- ko if: stinger.points  >2.49 && stinger.points <3.49 -->
    <div>2.5 - 3.48</div>
<!-- /ko -->    
<!-- ko if: stinger.points  >3.49 && stinger.points <4.49 -->
    <div>3.5 - 4.48</div>
<!-- /ko -->
<!-- ko if: stinger.points  >4.49 && stinger.points <5.1 -->
    <div>4.5 - 5</div>      
<!-- /ko -->
<!-- ko if: stinger.points  <0.1  -->
    <div >0</div>           
<!-- /ko -->

Or I could approach it like this:

<div data-bind="visible: rating.points > 1.2 && rating.points < 3.4">between 1.3 - 3.5</div>

However, thats also not working, like above.

What am I doing wrong? How to correct this?

Answer 1

When you use observable in the expression you have to unwrap it by adding (). Update your code as follow:

<!-- ko if: stinger.points()  >1.49 && stinger.points() <2.49 -->
    <div>1.5 - 2.48</div>       
<!-- /ko -->            
<!-- ko if: stinger.points()  >2.49 && stinger.points() <3.49 -->
    <div>2.5 - 3.48</div>
<!-- /ko -->    
<!-- ko if: stinger.points()  >3.49 && stinger.points() <4.49 -->
    <div>3.5 - 4.48</div>
<!-- /ko -->
<!-- ko if: stinger.points()  >4.49 && stinger.points() <5.1 -->
    <div>4.5 - 5</div>      
<!-- /ko -->
<!-- ko if: stinger.points()  <0.1  -->
    <div >0</div>           
<!-- /ko -->