Search code examples
knockout.jsdata-bindingdurandalcomposition

data-bind=" compose:{}" vs <!-- ko compose --> <!-- /ko -->

Im reading over here (document) http://durandaljs.com/documentation/Using-Composition.html

and i can find a markable difference on both compositions rather than have an inner container or no.

first one:

<div data-bind="compose: {
            view: 'Box',
            model: 'Box',
            activationData: {
                hasStar: true
            }
        }"></div>

and

<!-- ko compose: ________ --> <!-- /ko -->

(and actually it could have something inside)

Also they talk about the require usage.

Anyone with a good difference ? or when should i use each one ?

Solution

  • Knockout names the second binding syntax, <!-- ko ... -->, a virtual element.

    Their sole purpose is to allow you to create data-binds without having to alter your markup.

    With a virtual binding, you can for example do this:

    <ul>
  <li class="category">Fruits</li>
  <!-- ko foreach: fruits -->
  <li data-bind="text: name"></li>
  <!-- /ko -->
</ul>

    Which could render HTML like this:

    <ul>
  <li class="category">Fruits</li>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
</ul>

    So in short, you use the virtual element binding if you don't have a logical semantic HTML element to put the binding in. If there's already some sort of wrapper around your partial view, I'd advice to use the data-bind attribute.