Knockout “if” binding doesn't work with expression in a sortable list?

Question

I just run into another problem with my To-do-like sortable list made with Knockout and Knockout-sortable plugin.

I need to put a red delimiter under the element placed in the current time and cancel the sort if a element is dropped before that delimiter.

I tried with a "visible" binding and it works in some way, but the visibile binding just hide the DOM element and it mess up the sortable arrayIndex, adding unnecessary element to it.

<div class="delimiter" data-bind="visible: time() == $root.limit()"></div>

The "if" binding would be better because it insert DOM element only if necessary, but the expression I used with visible is always evaluated to true and I can't figure out why...

<div class="delimiter" data-bind="if: time() == $root.limit()"></div>

Here is the fiddle: http://jsfiddle.net/ingro/VaqqF/

Any help is appreciated, thank you!

Answer 1

You've simply misunderstood the if-binding: It removes the content of the node it has been applied to, not the node itself. If you want to remove a node without creating a wrapper around it (that you can use to add the binding), there is also the comment-version of the if-binding, called the containerless control flow syntax:

<!-- ko if: time() == $root.limit() -->
  <div class="delimiter"></div>
<!-- /ko -->

http://jsfiddle.net/VaqqF/11/

Ref: http://knockoutjs.com/documentation/if-binding.html