Each element will contain a block of HTML in a file called template.txt. The format of this file is identical to a regular template, i.e. pure renderable HTML content without doctypes or non-body sections:
<h1 data-bind="text: title"></h1>
When designing templates that make use of elements, you need to add some additional tags that enable the elements to be rendered as part of the output page. Consider this example that makes use of an element to display a product title for a list of products:
Widget template using elements
<!-- oc layout: panels --> <div class="oc-panel panel-1" data-oc-id="panel-1"> <!-- oc section: product-image --> <div data-bind="element: 'product-image'"></div> <!-- /oc --> <!-- oc section: product-image-carousel --> <div data-bind="element: 'product-image-carousel'"></div> <!-- /oc --> </div> <!-- /oc -->
The notable changes to the template are:
On line 1, ‘oc layout’ designates a region of the template as a layout.
On line 2, a <div> with a data-oc-id attribute specifies a panel whose contents can be configured in design studio.
On line 4, ‘oc section’ takes the name of the element. In layout manager all code within the oc section tags can be repositioned as one atomic unit.
On line 5 a <div> block is created and data-bind used, with element as the binding attribute, and the name of the element as a string (this name corresponds to the element directory.)
