Containerless syntax with custom bindings
In the first chapter, we spoke about containerless bindings; bindings applied through comments that created a virtual container around their "child" nodes. Now that we have a good understanding of how to create our own binding handlers, it's time to learn how to make them containerless bindings.
First, we are going to make a normal binding and then look at what we need to do to allow it to support the virtual elements. Let's say you want a binding that sorts its children elements. It would need to loop through them, check some property, and then rearrange the DOM so they were in order. Normally, sorting would be achieved by using a foreach
binding against a sorted observableArray
property, but we're going to make a sort binding that sorts on the width of the DOM node, which takes into account any CSS that may have affected it. The viewmodel would have a hard time getting this information to determine the proper sort order...