what is the difference between <!--ko--> binding and visible binding in knockout?

Question

ko <!--ko--> binding and data-bind="visible:sometext" binding

Both binding did the same operation and which one is efficient for use and which one is best

Answer 1

Virtual elements :

• Can't be use to change the style of the element, because there is no bound dom element.

e.g. :

<!-- ko visible: prop--><!-- /ko -->

• Are useful to control flow when you can't add an extra element :

e.g. :

<table>
    <tbody>
        <tr><td></td></tr>
        <!-- ko if: cond -->
            <tr><td>Optionnal line </td></tr>
         <!-- /ko  -->
    </tbody>
</table>

Actual elements data-bind :

• Can be used to control flow (if, foreach, with) and to modify the element attributes (style, id, class, etc).

Answer 2

<!-- ko [binding] --> allows you to bind to an virtual element.

data-bind="[binding]" is a regular binding and can only be applied to actual elements.

The difference is that the first can be used without having to create an element:

<ul>
    <li class="heading">My heading</li>
    <!-- ko foreach: items -->
        <li data-bind="text: $data"></li>
    <!-- /ko -->
</ul>

Do note that not every binding handler can be applied to an virtual element:

Custom bindings can work with virtual elements too, but to enable this, you must explicitly tell Knockout that your binding understands virtual elements, by using the ko.virtualElements.allowedBindings API.