Page History

WOComponentContent is the standard WebObjects dynamic element used to allow a sub-component to obtain content from its parent component. It acts as a marker in a sub-component to indicate where that content should be rendered. The content itself is the fragment between the child's opening and closing tags in the parent. For example, consider the following pair of components:

<div>
  <wo:Child><em>Hello, World!</em></wo:Child>
</div>

<p>
  <wo:WOComponentContent />
</p>

At run-time, the content between <wo:Child> and </wo:Child> is passed to Child and rendered in place of the WOComponentContent element:

<div>
  <p>
    <em>Hello, World!</em>
  </p>
</div>

The documentation for WOComponentContent clearly describes its main limitation:

Note: You can only have one WOComponentContent element in a given component.

We can overcome this limitation with ERXWOComponentContent and ERXWOTemplate. Firstly, the child component defines any number of regions for content from the parent using ERXWOComponentContent:

<wo:ERXWOComponentContent templateName="first">
First default
</wo:ERXWOComponentContent><br/>
<wo:ERXWOComponentContent templateName="third">
Third default
</wo:ERXWOComponentContent><br/>
<wo:ERXWOComponentContent templateName="second">
Second default
</wo:ERXWOComponentContent>

The value for the templateName binding is arbitrary, and we use it to match the ERXWOComponentContent with its ERXWOTemplate.

<div>
  <wo:Child>
    <wo:ERXWOTemplate templateName="third">
    Some <em>stuff</em> in the third template.
    </wo:ERXWOTemplate>
    <wo:ERXWOTemplate templateName="first">
    Some <em>stuff</em> in the first template.
    </wo:ERXWOTemplate>
  </wo:Child>
</div>

Note that the order of the ERXWOTemplate components in the parent need not match the order of the ERXWOComponentContent elements in the child (they are matched on the templateName binding), and if the child finds no matching ERXWOTemplate, the content within the ERXWOComponentContent element itself is rendered to the output. In this example, the output would be:

<div>
  Some <em>stuff</em> in the first template.
  Some <em>stuff</em> in the third template.
  Second default
</div>