IT:AD:Durandal.JS:HowTo:Include Partials
Summary
A “partial” is an html fragment that has been broken out to its own *.html page, and therefore be used in more than one place.
Durandal's documentation calls it Visual Composition (as oppossed to Object Composition which I find easier to understand as Components).
Characteristics:
- it is not backed by a ViewModel (differentiating it from a Components).
- it's ViewModel is the invoker's ViewModel.
Process
View
To include a partial into the current View, you compose to the view (not the ViewModel as one would do with a [IT:Durandal.JS:HowTo:Include Components|Components]]):
<callout icon="true" type="data-bind="compose: 'partials/viewTitle.html'" />
or
<div data-bind="compose: {view:'components/header.html'}"/>
or either one in the containerless syntax:
<!-- ko compose:{view:'components/header.html'} --><!--/ko-->
Note how the 'view' property implies that it will be searching through 'views' folder, so it is removed from given url…
The Partial View
The partial fragment's bindings point back to the invoker's ViewModel.
In the example below, the ViewModel had a subproperty called view, with two properties to describe it (title, description), which the fragment bound to:
<div> <h3 data-bind="html:view.title" /> <blockquote data-bind="html:view.description" /"> </callout>
another example:
<div class="description" role="complimentary" data-bind="html:view.About"/>
<style>
.view .description {margin:1em;border:dashed 2px #C0C0FF;font-style:italic;}
.view .description:first-child{font-weight:bold;}
</style>
File Location
It's just a suggestion, but I'll recommend that you keep partials in a subdirectory beside views:
/App/
/viewmodels
/s1
/components (common)
/zone1
/components (zone specific)
/...
/zoneN
/components
/views
/s1
/components (common)
/partials (common)
/zone1
/components (zone specific)
/partials (zone specific)
/...
/zoneN
/components (zone specific)
/partials (zone specific)
The 's1' is a bit of forward planning for allowing future skins to be released later.