The composition system

In the previous chapter, we looked at Knockout's new components feature, which lets us construct view/viewmodel pairs by instantiating them from the DOM with custom elements (or bindings). Knockout released this feature after Durandal, so there is some overlap between the two. Durandal's composition is like a blend of the components and the template binding.

Composition is primarily invoked in two ways, with setRoot to compose the applicationHost ID, and with the compose binding for data-bound values. Composition works by pairing a viewmodel with a view.

Note

Durandal's documentation refers to viewmodels as modules, which I think is a bit confusing. I will be referring to composable modules as viewmodels throughout this chapter.

When composition is given a viewmodel, it looks up the view, loads it with the RequireJS's text loader, binds it to the view, and finally, attaches it to the DOM.

Composing the application's root

Let's look at the root composition of our shell viewmodel...