Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

knockout.js

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

like image 372
Vicky Avatar asked Jan 07 '14 12:01

Vicky


2 Answers

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).
like image 128
Damien Avatar answered Oct 04 '22 17:10

Damien


<!-- 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.

like image 29
sroes Avatar answered Oct 04 '22 18:10

sroes