ko commands Embedded in comment tags?

Question

I am trying to understand HotTowel more.

In ~/App/views/shell.html, it contains:

<header>
    <!--ko compose: {view: 'nav'} --><!--/ko-->
</header>

Are ko commands embedded within Html comment tags? If so, what does the compose command do and how is the argument used?

Answer 1

Yes. This is a feature of KnockoutJS and it's called "virtual elements". The main advantage is that you don't have to add additional HTML tags if it's unnecessary. It's very useful and it's very clean in some scenarios. Mentioned in few places in Knockout documentation i.e.: http://knockoutjs.com/documentation/with-binding.html and http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html

As of compose it's a custom binding and is explained in HotTowel README:

The compose bindings for the header and footer are hard coded in Hot Towel to point to the nav and footer views, respectively. The compose binding for the section #content is bound to the router module's active item. In other words, when you click a navigation link its corresponding view is loaded in this area.