Confused about <!-- ko if: $parent.name == name --> in knockout js

Question

I've encountered this Knockout code and I'm confused about what the below code is performing:

   <!-- ko if: $parent.name == name -->
   <a data-bind='text: name'></a> 
   <!-- /ko -->

Shouldn't this code be interpreted as a comment?

Reading the documentation:
http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html
this looks like a custom binding?

Answer 1

It's a knockout conditional comment. The HTML inside the comment block is only executed if the code validates to true. Knockout can read and process this comment for you. You don't have to do anything special. Simply supply the conditional and make sure the variables you reference do in fact exist. Then sit back and let knockout do the rest.

Answer 2

It's not a custom binding. What you encountered is what knockout's documentation calls a "Virtual Element", it's a binding applied to a piece of code instead of an element. If you want to conditionally evaluate (i.e. bind to your viewmodel) a part of the DOM you can either put it inside a div with an if binding or put it inside comments like those.

HTML comments are part of the DOM so there's nothing stopping knockout from retrieving and interpreting them.