Question

JsFiddle: http://jsfiddle.net/fPsK6/2/

Why visible binding doesn’t work?

Answer 1

Because the values of the IsDefault properties are strings, which always evaluate to true. The only string which does not evaluate to true is the empty string.

Here’s an updated working fiddle.

In that version I’ve simply removed the quotes around the numbers (so they are actually numbers, not strings). The number 1 evaluates to true, and the number 0 evaluates to false. You could of course use literal boolean values instead of numbers (or any other values that evaluate to true and false appropriately).

Update (see comments)

Since your data comes from the server and you can’t change it, you can convert the string to a number in the data-bind attribute value:

<span data-bind="visible: +payload.IsDefault()">

Note that you need to call IsDefault as a function, rather than just giving a reference to the function. Also note the use of the unary plus operator, which converts a string to a number.

Here’s another updated fiddle.